The grid calculator uses responsive tokens from your space palette to construct a series of gutters and columns for your designs to live within. Rather than creating different grids for a number of breakpoints, think of this as one grid which can be viewed from any perspective. If you’re not sure where to start, this blog post might help.
Your 12 columns complete the calculation to generate your maximum container width. But creating a fully coded grid system requires the nuance and context that only you have.
This generated CSS is therefore intentionally minimal to provide the foundations to help you build your custom grid, without imposing a particular column-based approach on you.
Donnie D’Amato and Brad Frost have both discussed working with grids at length; their posts are well worth your time.
/* @link https://utopia.fyi/grid/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--grid-max-width: 77.50rem;
--grid-gutter: var(--space-s-l, clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem));
--grid-columns: 12;
}
.u-container {
max-width: var(--grid-max-width);
padding-inline: var(--grid-gutter);
margin-inline: auto;
}
.u-grid {
display: grid;
gap: var(--grid-gutter);
}