CSS Grid Builder

CSS Grid Layout is a two-dimensional layout system that lets you place content in rows and columns simultaneously. Unlike Flexbox (which is one-dimensional), Grid gives you precise control over both axes at once. It's ideal for page-level layouts, dashboards, card grids, and any design that needs rows AND columns.

grid-template-columns defines the number and size of columns in your grid. You can use fixed lengths (200px), percentages (25%), fractions (1fr), auto, minmax(200px, 1fr), or repeat(). The fr unit is the most powerful — 1fr means 'one fraction of available space', so repeat(3, 1fr) creates three equal columns.

gap is a shorthand that sets both row and column spacing at once (e.g., gap: 16px sets both to 16px, gap: 8px 16px sets row to 8px and column to 16px). column-gap and row-gap set each axis independently. gap replaces the older grid-gap property and now works in both Grid and Flexbox.

Use auto-fill or auto-fit with minmax(): grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This creates as many columns as fit in the container at 250px minimum, expanding them equally to fill the row. auto-fit collapses empty tracks; auto-fill keeps them. This is the most common responsive grid pattern.

Use Grid when you need two-dimensional layout (rows AND columns matter) — page layouts, image galleries, dashboards, form layouts. Use Flexbox when laying out items in one direction (a navigation bar, a row of buttons, a vertical stack). They complement each other: Grid for the macro layout, Flexbox for components inside grid cells.