Grid

Properties for specifying layout grid for a QtmGrid 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 QtmGrid component.

1

2

3

4

5

6

7

8

9

10

11

12

<QtmGrid>
  <div>1</div>
  <div>2</div>
  .....
  <div>12</div>
</QtmGrid>

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.

<QtmGrid medium={6}>
  <div>1</div>
  <div>2</div>
  .....
  <div>12</div>
</QtmGrid>

API

QtmGrid

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 `@qtm/css/dist/utilities.css`
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