Props
- inline?
- autoRows?
- areas?
- templateColumns?
- templateRows?
- autoColumns?
- autoFlow?
- UNSAFE_autoRows?
- UNSAFE_templateColumns?
- UNSAFE_templateRows?
- UNSAFE_autoColumns?
- style?
- className?
- id?
Whether or not the element generate line breaks before or after himself.
An alias for the css grid-auto-rows property.
An alias for the css grid-template-areas property.
An alias for the css grid-template-columns property.
An alias for the css grid-template-rows property.
An alias for the css grid-auto-columns property.
An alias for the css grid-auto-flow property.
An alias for the css grid-auto-rows property.
An alias for the css grid-template-columns property.
An alias for the css grid-template-rows property.
An alias for the css grid-auto-columns property.
Examples
Areas
A grid can define explicit sections with areas.
Template Columns
A grid can define explicit columns and rows. A value can be a grid length value or a Hopper spacing scale value.
Auto Columns
A grid can define the size of implicitly created columns. A value can be a grid length value or a Hopper spacing scale value.
Gap
A grid layout can have a gap between its columns and rows. columnGap and rowGap are also available to specify a gap for a single axis.
Column Spanning
A grid item can span over multiple columns.
Nesting
Grids can be nested to create complex layouts.
Repeat
A custom repeat function is available to support Hopper spacing scale values. However, if you prefer, you can use the native CSS repeat function.
Minmax
A custom minmax function is available to support Hopper spacing scale values. However, if you prefer, you can use the native CSS minmax function.
Fit Content
A custom fit-content function is available to support Hopper spacing scale values. However, if you prefer, you can use the native CSS fit-content function.