utopia-grid-layout

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

Location: css/styles/grid.css

```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 |

.u-container

Centers content with fluid horizontal padding.

```css

.u-container {

max-width: var(--grid-max-width);

padding-inline: var(--grid-gutter);

margin-inline: auto;

}

```

Usage:

```html

```

.u-grid

Basic grid with fluid gap.

```css

.u-grid {

display: grid;

gap: var(--grid-gutter);

}

```

Usage:

```html

```

Combine Container and Grid

```html

```

Auto-fit Responsive Grid

```css

.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

```css

.tight-grid {

display: grid;

gap: var(--space-s);

}

.loose-grid {

display: grid;

gap: var(--space-xl);

}

```

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.

• css/styles/grid.css - Grid variables and utilities
• css/styles/layouts.css - Currently empty, available for layout utilities