Skip to main content
🏠ComponentsGridVersion: Next

Grid

Class for specifying layout grid for an element.

Each breakpoint range determines the number of columns, and recommended margins and gutters, for each display size.

  • Breakpoint prefix
    Properties
  • 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 class.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="qtm-grid">
<div>1</div>
<div>2</div>
.....
<div>12</div>
</div>

Grid customization

Thanks to @qtm/css/dist/utilities.css, the layout grid can be adjusted to meet the needs of both your product and various device sizes.

For example, 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 {screen}: prefix to any existing grid-template-columns utility. By using medium:grid-cols-6, the layout grid has 6 columns at medium screen sizes and above.

<div class="qtm-grid medium:grid-cols-6">
<div>1</div>
<div>2</div>
.....
<div>12</div>
</div>