utopia-grid-layout

matthewharwood's avatarfrom matthewharwood

CSS Grid utilities using Utopia fluid spacing. Reference for the grid variables and utility classes defined in this project.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 9, 2025
[Developer Tools]

When & Why to Use This Skill

This Claude skill provides a comprehensive reference and implementation guide for CSS Grid utilities integrated with Utopia's fluid spacing system. It enables developers to build responsive, scalable web layouts by leveraging predefined CSS variables and utility classes that automatically adjust based on viewport size, ensuring design consistency and reducing manual CSS overhead.

Use Cases

  • Implementing fluid responsive layouts that scale seamlessly from mobile (360px) to desktop (1240px) without complex media queries.
  • Maintaining design system consistency by using standardized spacing tokens and grid variables across different web components.
  • Rapidly prototyping page structures using the .u-container and .u-grid utility classes to ensure proper alignment and gutters.
  • Automating the generation of CSS Grid code that adheres to a project's specific architectural constraints and fluid typography rules.
nameutopia-grid-layout
descriptionCSS Grid utilities using Utopia fluid spacing. Reference for the grid variables and utility classes defined in this project.
allowed-toolsRead, Write, Edit

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