Grid

Properties for specifying layout grid for a qtm-grid component:

• Property
  Default 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 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 component.

1

2

3

4

5

6

7

8

9

10

11

12

<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

Loading API documentation...