Grid

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 nested div 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.