<.grid columns="3" gap="3" width="100%">
<.decoration_box height="64px" /><.decoration_box height="64px" /><.decoration_box height="64px" /><.decoration_box height="64px" /><.decoration_box height="64px" /><.decoration_box height="64px" />
</.grid>API Reference
This component is based on the div element and supports common margin props.
Use these props to create grid layouts.
| Prop | Type | Default | Description |
|---|---|---|---|
align
|
string
|
—
|
Align items. Responsive supported. |
areas
|
string
|
—
|
Grid template areas. String or responsive map. |
as
|
string
|
"div"
|
|
as_child
|
boolean
|
false
|
Composes the component into its immediate child instead of rendering its own HTML element. |
bottom
|
string
|
—
|
CSS bottom property. Accepts scale values, CSS strings, responsive. |
class
|
string
|
nil
|
Additional CSS classes to add to the element. |
columns
|
any
|
—
|
Grid template columns. 1-9, CSS string, or responsive map. |
display
|
string
|
—
|
CSS display property. Responsive supported. |
flex_basis
|
string
|
—
|
CSS flex-basis property. Responsive supported. |
flex_grow
|
string
|
—
|
CSS flex-grow property. Responsive supported. |
flex_shrink
|
string
|
—
|
CSS flex-shrink property. Responsive supported. |
flow
|
string
|
—
|
Grid auto flow. Responsive supported. |
gap
|
string
|
—
|
Gap utility class (0-9, -1 to -9) |
gap_x
|
string
|
—
|
Row gap utility class (0-9, -1 to -9) |
gap_y
|
string
|
—
|
Column gap utility class (0-9, -1 to -9) |
grid_area
|
string
|
—
|
CSS grid-area property. Responsive supported. |
grid_column
|
string
|
—
|
CSS grid-column property. Responsive supported. |
grid_column_end
|
string
|
—
|
CSS grid-column-end property. Responsive supported. |
grid_column_start
|
string
|
—
|
CSS grid-column-start property. Responsive supported. |
grid_row
|
string
|
—
|
CSS grid-row property. Responsive supported. |
grid_row_end
|
string
|
—
|
CSS grid-row-end property. Responsive supported. |
grid_row_start
|
string
|
—
|
CSS grid-row-start property. Responsive supported. |
height
|
any
|
—
|
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
inset
|
string
|
—
|
CSS inset property. Accepts scale values, CSS strings, responsive. |
justify
|
string
|
—
|
Justify content. Responsive supported. |
left
|
string
|
—
|
CSS left property. Accepts scale values, CSS strings, responsive. |
m
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
max_height
|
any
|
—
|
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
max_width
|
any
|
—
|
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
mb
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
min_height
|
any
|
—
|
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
min_width
|
any
|
—
|
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
ml
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mr
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mt
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mx
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
my
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
overflow
|
string
|
—
|
CSS overflow property. Responsive supported. |
overflow_x
|
string
|
—
|
CSS overflow-x property. Responsive supported. |
overflow_y
|
string
|
—
|
CSS overflow-y property. Responsive supported. |
p
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pb
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pl
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
position
|
string
|
—
|
CSS position property. Responsive supported. |
pr
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pt
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
px
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
py
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
right
|
string
|
—
|
CSS right property. Accepts scale values, CSS strings, responsive. |
rows
|
any
|
—
|
Grid template rows. 1-9, CSS string, or responsive map. |
style
|
string
|
""
|
|
top
|
string
|
—
|
CSS top property. Accepts scale values, CSS strings, responsive. |
width
|
any
|
—
|
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
align
Align items. Responsive supported.
Type
string
Default
—
areas
Grid template areas. String or responsive map.
Type
string
Default
—
as
Type
string
Default
"div"
as_child
Composes the component into its immediate child instead of rendering its own HTML element.
Type
boolean
Default
false
bottom
CSS bottom property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
class
Additional CSS classes to add to the element.
Type
string
Default
nil
columns
Grid template columns. 1-9, CSS string, or responsive map.
Type
any
Default
—
display
CSS display property. Responsive supported.
Type
string
Default
—
flex_basis
CSS flex-basis property. Responsive supported.
Type
string
Default
—
flex_grow
CSS flex-grow property. Responsive supported.
Type
string
Default
—
flex_shrink
CSS flex-shrink property. Responsive supported.
Type
string
Default
—
flow
Grid auto flow. Responsive supported.
Type
string
Default
—
gap
Gap utility class (0-9, -1 to -9)
Type
string
Default
—
gap_x
Row gap utility class (0-9, -1 to -9)
Type
string
Default
—
gap_y
Column gap utility class (0-9, -1 to -9)
Type
string
Default
—
grid_area
CSS grid-area property. Responsive supported.
Type
string
Default
—
grid_column
CSS grid-column property. Responsive supported.
Type
string
Default
—
grid_column_end
CSS grid-column-end property. Responsive supported.
Type
string
Default
—
grid_column_start
CSS grid-column-start property. Responsive supported.
Type
string
Default
—
grid_row
CSS grid-row property. Responsive supported.
Type
string
Default
—
grid_row_end
CSS grid-row-end property. Responsive supported.
Type
string
Default
—
grid_row_start
CSS grid-row-start property. Responsive supported.
Type
string
Default
—
height
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
inset
CSS inset property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
justify
Justify content. Responsive supported.
Type
string
Default
—
left
CSS left property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
m
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
max_height
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
max_width
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
mb
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
min_height
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
min_width
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
ml
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mr
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mt
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mx
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
my
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
overflow
CSS overflow property. Responsive supported.
Type
string
Default
—
overflow_x
CSS overflow-x property. Responsive supported.
Type
string
Default
—
overflow_y
CSS overflow-y property. Responsive supported.
Type
string
Default
—
p
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pb
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pl
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
position
CSS position property. Responsive supported.
Type
string
Default
—
pr
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pt
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
px
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
py
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
right
CSS right property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
rows
Grid template rows. 1-9, CSS string, or responsive map.
Type
any
Default
—
style
Type
string
Default
""
top
CSS top property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
width
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
Layout sizing, padding, position, overflow, and related props are shared with Box, Flex, Container, and Section.
Examples
Responsive
Props marked responsive (such as columns and rows) accept a breakpoint map. For example, the following grid starts with 1 column and uses 2 columns from the medium breakpoint.
<.grid columns={%{initial: "1", md: "2"}} gap="3" width="auto">
<.box height="64px"><.decoration_box height="64px" /></.box>
<.box height="64px"><.decoration_box height="64px" /></.box>
</.grid>