Grid
Properties for specifying layout grid for a qtm-grid component:
- PropertyDefault value
- xlarge
12
- large
12
- medium
8
- small
8
- xsmall
4
- xxsmall
4
Each breakpoint range determines the number of columns, and recommended margins and gutters, for each display size.
- Breakpoint prefixProperties
- xlarge
grid-template-columns: repeat(12, minmax(0, 1fr));
margin-left: 32px;
margin-right: 32px;
gap: 16px;
- large
grid-template-columns: repeat(12, minmax(0, 1fr));
margin-left: 32px;
margin-right: 32px;
gap: 16px;
- medium
grid-template-columns: repeat(8, minmax(0, 1fr));
margin-left: 32px;
margin-right: 32px;
gap: 16px;
- small
grid-template-columns: repeat(8, minmax(0, 1fr));
margin-left: 32px;
margin-right: 32px;
gap: 16px;
- xsmall
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-left: 16px;
margin-right: 16px;
gap: 8px;
- xxsmall
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-left: 16px;
margin-right: 16px;
gap: 8px;