Grid Generator

CSS Grid is a two-dimensional layout system — the first in the browser that lets you align content across both rows and columns at the same time. Where Flexbox distributes content along one axis, Grid gives you an explicit table of tracks you can place items into, making it the right choice for page-level layouts, photo galleries, dashboards, and anything with aligned rows and columns.

The fr unit and auto-fit

The frunit is Grid's killer feature: it represents a fraction of the remaining space after fixed tracks are sized. grid-template-columns: 200px 1fr 1frgives a fixed sidebar and two equal content columns that share what's left.

For responsive grids without media queries, combine repeat(), auto-fit, and minmax(): repeat(auto-fit, minmax(240px, 1fr)) creates as many equal columns as will fit while keeping each at least 240px wide. This pattern replaces most grid media queries.

Gaps, areas, and implicit rows

• Use gap (formerly grid-gap) for row and column spacing. It's cleaner than margins and never collapses.
• grid-template-areas lets you draw your layout as ASCII art and place items by name — incredibly readable for page shells.
• Items overflowing the defined grid get placed into implicit rows automatically; control their size with grid-auto-rows.