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;
Usage
Control the responsive layout grid of an element by using qtm-grid
component.
<qtm-grid>
<div>1</div>
<div>2</div>
.....
<div>12</div>
</qtm-grid>
Grid customization
By default, the layout grid has 8 columns at medium screen size, and 12 columns at large screen sizes and above. To control the columns of a grid at a specific breakpoint, add a medium
property set to 6. The layout grid has 6 columns at medium screen sizes and above.
<qtm-grid medium="6">
<div>1</div>
<div>2</div>
.....
<div>12</div>
</qtm-grid>
API
qtm-grid
Property | Type | Default | Description |
---|---|---|---|
classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing | |
large | number | define the number of columns in the grid for each breakpoint range | |
medium | number | define the number of columns in the grid for each breakpoint range | |
small | number | define the number of columns in the grid for each breakpoint range | |
xlarge | number | define the number of columns in the grid for each breakpoint range | |
xsmall | number | define the number of columns in the grid for each breakpoint range | |
xxsmall | number | define the number of columns in the grid for each breakpoint range |