Skip to main content
🏠ComponentsGridVersion: 2.0.0-beta.6

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

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
largenumberdefine the number of columns in the grid for each breakpoint range
mediumnumberdefine the number of columns in the grid for each breakpoint range
smallnumberdefine the number of columns in the grid for each breakpoint range
xlargenumberdefine the number of columns in the grid for each breakpoint range
xsmallnumberdefine the number of columns in the grid for each breakpoint range
xxsmallnumberdefine the number of columns in the grid for each breakpoint range