Grid

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

1

2

3

4

5

6

7

8

9

10

11

12

<Grid>
  <div>1</div>
  <div>2</div>
  .....
  <div>12</div>
</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.

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

API

Loading API documentation...