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
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