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>