Classes
.s-grid
Defines a grid container and a media query container. Unfortunately, due to a bug in Safari, an additional
div
inside.s-grid
is necessary. This class currently defines only a container query, while the nesteddiv
defines a grid container with:grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
Once the Safari bug is resolved, a new version of sugar.css will be introduced, and the nested
div
will be removed..s-fixed
Can be used together with
.s-grid
. When used, grid columns do not consume remaining space if there are fewer columns than possible. Useful for wide grids with a small number of columns.
Custom properties
All custom properties (except --gap
) can be used on both the
.s-grid
and its cells. When applied to the grid element, they are applied to all cells
globally. If applied to a child, they are specific to that element.
--span
- Defies how many columns are used by a cell. Default: 1
--span-N
N is a number between 2 and 12.
Defines how many columns are used by a cell when n columns exist in the grid. For example, when
--span-3: 2
is used, the cell spans across 2 columns only when at least 3 columns fit the grid.--offset
- Defines how many columns are left empty before a cell. Default: 0
--offset-N
N is number between 2 and 12 eg.
--offset-3
Defines how many columns are left empty before a cell when n columns exist in the grid.
--padding
- Defines padding on a cell. Handy when used on the whole grid. Default: 0
--gap
- Defines the gap between cells.