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>