Grid
A very simple, naive CSS Grid implementation
The Upstart Grid is a minimal implementation of CSS Grid. It allows for an
arbitrary number of grid columns, each of which is 1fr in width.
There is no accounting for rows, due to the added complexity that would introduce, plus the 'fact that if you need something more specific, you are probably better of defining your own grid implementation.
The Upstart Grid is made up of two components:
- A grid container; and
- A grid item - a grid specific content wrapper that provides a grid specific API
Grid Container
The grid container is the <Grid> component. It defines your grid, the number
of grid columns, and the size of any gap between your grid components. It is set
to a width of 100%, so it will fill all available width wherever you put it.
By default, it has 6 columns, and a grid gap of space[3] from the theme
(1.6rem by default).
It expects content in the form of children, and can take any component or HTML
element you would like to pass to it, however they will explicitly be constrained
to a single column.
Props
| Prop name | Type | Default | Description |
|---|---|---|---|
className | string | null | A custom className you would like to pass to the Component |
cols | union | 6 | The number of columns in the Grid |
gap | union | 3 | The the index of the value in the space array to use as the size of the gap between columns and rows |
children | union | Required | The children of the Grid |
Grid Item
The grid item is the <GridItem> component, and is intended specifically for use
with the <Grid> component, and exposes an API that will allow you to specify
how many columns wide it should be, as well as which grid line it should start
and/or end at.
Props
| Prop name | Type | Default | Description |
|---|---|---|---|
className | string | null | A custom className you would like to pass to the Component |
end | union | null | The grid line the item will end on |
span | union | null | How many grid tracks the item will span |
start | union | null | The grid line the item will start on |
children | union | Required | The children of the Grid |