CSS Grid Generator

The CSS Grid Generator builds responsive 2D grid layouts through a visual editor. Drag to resize columns and rows, specify sizing with fr units (fractional), minmax(), auto, or fixed pixels. Name grid areas (header, sidebar, main, footer) and assign items to them by name — the killer feature of CSS Grid that makes layouts readable. Add gaps between rows and columns, set alignment for items, and generate production-ready CSS with matching HTML structure. Supports the modern features developers actually use: minmax(), auto-fit, auto-fill, subgrid (Firefox only for now), and named lines.

CSS Grid is the most powerful layout system CSS has ever had. Unlike Flexbox (1-dimensional), Grid handles rows AND columns together, enabling magazine-style layouts, dashboards, card grids with matching heights, responsive designs without media queries (thanks to auto-fit minmax()), and complex asymmetric layouts that used to require JavaScript. This generator runs entirely in your browser, so you can iterate on layouts without refreshing a dev server or touching your codebase.

CSS Grid Layout (Level 1 stable since 2017, Level 2 with subgrid stable in Firefox 71+, Safari 16+, Chrome 117+) is a two-dimensional layout system.

Container properties:

``css
.grid {
display: grid; /* or inline-grid */
grid-template-columns: 1fr 2fr 1fr; /* define columns */
grid-template-rows: auto 1fr auto; /* define rows */
grid-template-areas: /* named areas */
"header header header"
"sidebar main aside"
"footer footer footer";
gap: 1rem; /* spacing between items */
row-gap: 1rem;
column-gap: 1rem;
justify-items: stretch; /* horizontal alignment within cells */
align-items: stretch; /* vertical alignment within cells */
justify-content: start; /* horizontal alignment of grid */
align-content: start; /* vertical alignment of grid */
}
``

Item properties:

``css
.grid-item {
grid-column: 1 / 3; /* span from line 1 to line 3 */
grid-row: 2; /* place in row 2 */
grid-area: main; /* assign to named area */
justify-self: stretch; /* override container justify-items */
align-self: stretch;
}
``

Sizing units:

- fr (fractional) — 1fr 2fr = columns share space in 1:2 ratio after fixed widths are subtracted.
- px / rem / em — fixed sizes.
- % — percentage of container width.
- auto — size to content.
- min-content / max-content — shrinks or expands to content.
- minmax(min, max) — sizes between bounds: minmax(200px, 1fr) = at least 200px, up to equal share.

auto-fit and auto-fill:

The most powerful Grid feature — responsive without media queries:

``css
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
``

This creates as many columns as fit, each at least 300px wide. On 1200px viewport: 4 columns. On 800px: 2 columns. On 350px: 1 column.

- auto-fit — empty tracks collapse (layout fills container).
- auto-fill — empty tracks remain (creates reserved space).

Use auto-fit when you want items to fill, auto-fill when you want consistent column count.

Named grid areas:

The most readable Grid feature. Instead of abstract line numbers, name each area:

```css
.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
```

The ASCII art of grid-template-areas is literally the layout — dots represent empty cells, names span multiple cells to merge.

Implicit vs explicit grid:

- Explicit — rows and columns defined by grid-template-*.
- Implicit — created automatically when items are placed outside the explicit grid. Sized by grid-auto-rows, grid-auto-columns.

Subgrid (CSS Grid Level 2):

``css
.child {
display: grid;
grid-template-columns: subgrid; /* inherits parent grid */
}
``

Allows nested grids to align with parent grid lines. Essential for complex card grids where internal content should align across cards. Supported in Firefox 71+, Safari 16+, Chrome 117+ (widely available as of 2024).

CSS Grid vs Flexbox: Grid is 2D (rows and columns together). Flexbox is 1D. Use Grid for overall page/section layouts. Use Flexbox for 1D component layouts (navigation, button groups). Most real projects use both together.

CSS Grid vs table-based layout (legacy): Tables for layout are inappropriate for modern CSS — inaccessible, hard to style, inflexible. Grid provides all table advantages with proper semantics.

CSS Grid vs Bootstrap grid: Bootstrap grid uses a 12-column float-based or flex-based system with predefined breakpoints. Modern CSS Grid gives the same power without the framework cost. Build responsive grids with auto-fit minmax() — no Bootstrap needed.

CSS Grid vs float-based layouts (legacy): Floats were the standard before Grid — brittle, required clearfix, hard for complex layouts. Grid replaces them entirely for layout. Floats still useful for text wrapping around images.

Grid auto-fit vs auto-fill: auto-fit collapses empty tracks (layout fills container). auto-fill preserves them (reserves space). Use auto-fit when you want items to spread out, auto-fill when you want fixed-size slots.

Named areas vs line-based placement: Named areas (grid-template-areas) are readable — the CSS IS the layout. Line-based (grid-column: 1 / 3) is more flexible for dynamic content. Use names for fixed layouts, lines for programmatic placement.