Utopia Grid Layout

This project's grid system with fluid spacing

Configuration

Generated from: https://utopia.fyi/grid/calculator?c=360,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

Grid Variables

Location: css/styles/grid.css

:root { --grid-max-width: 77.50rem; --grid-gutter: var(--space-s-l, clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem)); --grid-columns: 12; }

Variable Value Description

--grid-max-width

77.50rem (1240px) Maximum content width

--grid-gutter

var(--space-s-l) Fluid gutter: 18px → 40px

--grid-columns

12 Column count

Utility Classes

.u-container

Centers content with fluid horizontal padding.

.u-container { max-width: var(--grid-max-width); padding-inline: var(--grid-gutter); margin-inline: auto; }

Usage:

<div class="u-container"> <!-- Content constrained to 1240px max width --> </div>

.u-grid

Basic grid with fluid gap.

.u-grid { display: grid; gap: var(--grid-gutter); }

Usage:

<div class="u-grid"> <div>Grid item</div> <div>Grid item</div> </div>

Usage Patterns

Combine Container and Grid

<div class="u-container"> <div class="u-grid" style="grid-template-columns: repeat(3, 1fr);"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> </div>

Auto-fit Responsive Grid

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--grid-gutter); }

Using Space Tokens for Custom Gaps

.tight-grid { display: grid; gap: var(--space-s); }

.loose-grid { display: grid; gap: var(--space-xl); }

What's NOT Defined

The following patterns are not currently in the CSS:

• Column span classes (e.g., .col-span-6 )

• Named grid areas

• Subgrid utilities

• Layout primitives (stack, cluster, sidebar)

Add these as needed based on project requirements.

Files

• css/styles/grid.css

• Grid variables and utilities

• css/styles/layouts.css

• Currently empty, available for layout utilities