LayoutIntermediate

CSS Grid templates & Area Placements

Create custom columns-rows definitions, pixel-fraction scaling mixers, and area grid assignments.

The Grid Archetype

CSS Grid allows dividing pages into columns and rows.

# Template Definitions

Define columns and rows using fraction (`fr`) units: ```css .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 16px; } ```

This builds three columns where the center column takes double the space of side columns dynamically on window resizing.