Design CSS Grid layouts visually — set columns, rows, gaps and alignment with a live preview and instant copy-ready code.
Grid vs Flexbox — the real division of labor. Flexbox solves one-dimensional layout: distributing items along a single axis (a navbar, a toolbar, a button group). Grid solves two-dimensional layout: rows AND columns at once (a dashboard, a photo wall, a page skeleton). The common mistake is asking which one to use everywhere. The correct question is which axis you care about. If items flow in one line — Flexbox. If you are structuring a region of the page into tracks — Grid. In practice, a page is usually 80% Grid for structure and 20% Flexbox for the small alignment details inside each cell.
The fr unit is smarter than percentages. 1fr means "one fraction of the leftover space". grid-template-columns: 1fr 2fr gives a 1:2 ratio, and the fr tracks automatically absorb whatever the fixed tracks (px, em, auto) and the gap leave over. Percentages must be hand-tuned to compensate for gaps and padding; fr never overflows. Rule of thumb: use fr for the fluid columns, px or auto for the fixed rails (sidebars, gutters), and minmax for the boundaries.
minmax() + auto-fit kills media queries. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) creates as many 200px-or-larger columns as fit, and stretches them to fill the row. Shrink the window and columns drop from 5 to 3 to 1 automatically — no breakpoint needed. auto-fill keeps empty tracks (stable column widths across breakpoints); auto-fit collapses them (content expands to fill). For card grids, auto-fit is the usual choice.
Alignment is a two-axis affair. On the container, justify-items aligns items horizontally inside their cells and align-items vertically; both default to stretch, which is why cells fill their tracks. justify-content/align-content align the whole grid inside the container — visible only when tracks are narrower than the container (e.g. with justify-content: center and fixed-width columns). For one-off overrides, justify-self/align-self on a single item beat the container setting.
Named areas make layouts readable. grid-template-areas: "header header" "sidebar main" "footer footer" turns the layout into an ASCII diagram that survives code review. Assign children with grid-area: header. The classic trap: area names must form a rectangle — an L-shaped "sidebar main / footer footer" is invalid, because a cell cannot be split between two areas.
Grid items never overlap — until you ask them to. Implicit rows are created for items that exceed the explicit tracks (grid-auto-rows controls their height, defaulting to auto). Two items can occupy the same cell only when you explicitly assign grid-column/grid-row spans or overlapping lines — useful for hero overlays, but the number-one source of "where did my item go" bugs.
See also: Flexbox Generator · CSS Gradient Editor · Box Shadow Generator · Border Radius Generator · Color Converter · All CSS Tools · Read: The Layout Tax · The Animation Tax