utopia-grid-layout_skill

Overview

This skill documents a lightweight CSS Grid utility built with Utopia fluid spacing. It explains the core CSS variables, the container and grid utility classes, and practical patterns for responsive layouts. The goal is to help front-end developers apply a fluid, predictable grid in vanilla projects and web components.

How this skill works

The grid exposes three root variables: --grid-max-width, --grid-gutter, and --grid-columns. Two primary utilities are provided: .u-container to center and constrain content with fluid horizontal padding, and .u-grid which creates a grid with a gap driven by the fluid gutter token. Examples show combining the container and grid, using auto-fit responsive columns, and swapping space tokens for tighter or looser gaps.

When to use it

• You need a simple, framework-free responsive grid with fluid gutters.
• Building content-constrained layouts that scale between mobile and wide screens.
• Creating card grids using auto-fit/minmax for responsive columns.
• Integrating into vanilla JS, web components, or static HTML sites.
• When you want spacing tied to Utopia space tokens rather than fixed px values.

Best practices

• Wrap grid instances in .u-container when content should be constrained and centered.
• Prefer grid-template-columns with repeat(auto-fit, minmax(...)) for responsive card layouts.
• Use existing space tokens (e.g., --space-s, --space-xl) to vary gap sizes instead of adding new fixed values.
• Keep layout primitives (stack, sidebar) in a separate layouts file to avoid cluttering grid utilities.
• Extend with column-span or named-area utilities only when a project demands them; keep core utilities minimal.

Example use cases

• A three-column feature section constrained to a max content width using .u-container + .u-grid.
• A responsive card gallery using repeat(auto-fit, minmax(min(300px,100%), 1fr)) and var(--grid-gutter).
• Tight form layouts using .u-grid with gap swapped to --space-s for denser spacing.
• Wide-viewport hero sections centered with .u-container and a grid for overlapping elements.
• A web component that imports the grid variables and applies .u-grid for internal layout.