CSS Grid

Use Flexbox when content should flow: nav menus, button groups, card interiors, centering content, space distribution. When items have varying sizes and should adapt, Flexbox is your tool.

Use Grid when you need structure: page layouts with header/sidebar/main/footer, card grids with equal sizing, dashboards, image galleries. When alignment across rows AND columns matters, Grid is your tool.

Real layouts use both: Grid for the overall page structure (sidebar + main), Flexbox for component internals (nav items, card content). They're complementary tools, not alternatives.

grid-template-rows defines row heights. Often rows are auto (content-sized) rather than fixed. You can mix: grid-template-rows: 60px auto 1fr 40px for header/content/spacer/footer.

gap works the same as in Flexbox — spacing between grid cells. Use row-gap and column-gap for different spacing on each axis. No more margin hacks!

The magic formula for responsive grids: repeat(auto-fill, minmax(200px, 1fr)). Creates as many columns as will fit, each at least 200px, growing to fill remaining space. No media queries needed!

span makes items stretch across multiple cells. grid-column: span 2 spans 2 columns. grid-row: span 2 spans 2 rows. Great for featured cards or full-width sections.

For precise control, specify start and end lines: grid-column: 1 / 3 starts at line 1, ends at line 3. You can also use -1 for the last line: grid-column: 1 / -1 spans full width.

You can name grid lines for readability: [sidebar-start] 200px [sidebar-end]. Then reference them: grid-column: sidebar-start / sidebar-end. Helpful for complex page layouts.

Define the template on the container, then assign each item to its area with grid-area: name. The CSS reads like a blueprint — you can visualize the layout just by reading the code.

Use a period . for empty cells. The space will be left blank in the layout. You can also use multiple periods ... for readability when empty spans multiple columns.

With grid-template-areas, changing layout per breakpoint is trivial — just redefine the template in a media query. The HTML stays the same, only the CSS grid definition changes.

justify-self and align-self override alignment for individual items. place-self is shorthand for both. Useful when one item needs different alignment than the rest.

justify-content and align-content position the entire grid when it doesn't fill its container. Works like Flexbox — space-between, center, etc. Rarely needed but useful for centering a fixed-size grid.