Grid
The Grid layout primitive is a thin abstraction over the CSS grid layout.
import { Grid } from '@balance-web/grid';The Grid layout primitive is a thin abstraction over the CSS grid layout.
Usage
Grid Template columns and rows
grid-template-columns and grid-template-rows allows to map to column and row layout respectively.
6-column grid
grid-template-columns can be used to define N-column grid.
2-column layout with varying width
grid-template-columns allows to have a grid with varying column widths.
Layout using Template Area
grid-template-areas defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.
Grid column start / end & Grid row start / end
grid-column-start, grid-column-end, grid-row-start and grid-row-end determine a grid item’s location within the grid by referring to specific grid lines.
Note: These are 'grid item' (not a 'grid container') specific props.