CSS Grid Generator

fr (fraction) units divide available space after fixed-size tracks are subtracted. grid-template-columns: 200px 1fr 2fr creates 200px first column, then divides remaining space into 3 parts (1fr gets 1/3, 2fr gets 2/3). Percentages calculate from total container width including gaps. grid-template-columns: 25% 75% may overflow if gap is set (25% + gap + 75% > 100%). fr units automatically account for gaps. Use fr for flexible layouts, px for fixed sidebars/headers, mix for hybrid (200px sidebar, 1fr main content). fr is like flex-grow but for grid tracks. Modern approach: use fr for responsive grids.

Both create responsive grids that adjust column count automatically. auto-fill: creates as many tracks as fit, even if empty (preserves grid structure, empty columns exist). auto-fit: creates tracks only for existing items, collapses empty tracks (items spread to fill space). Example: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) with 3 items in 1000px container = 5 columns (3 filled, 2 empty). auto-fit with same scenario = 3 columns (each item grows to ~333px). Use auto-fill for consistent grid visual (galleries, maintains spacing), auto-fit for flexible item sizing (cards that grow). Combine with minmax() for min/max track size control.

grid-template-areas provides semantic, visual CSS that maps areas to named grid regions. Define layout as ASCII art: grid-template-areas: "header header" "sidebar main" "footer footer"; then assign items: grid-area: header. Benefits: readable, maintainable, easy to comprehend layout structure at a glance, simple to reorder with media queries (just change template-areas string). Drawbacks: verbose for complex grids, must define every cell. Use for: page layouts with distinct sections (header/sidebar/main/footer), dashboard panels, marketing templates. Skip for: simple grids, dynamic item counts, when using auto-flow. Modern best practice: template-areas for skeleton layout, auto-flow for content items.

Use repeat() with auto-fit/auto-fill and minmax(): grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)). This creates responsive grid where: columns are minimum 250px wide but shrink to 100% on very small screens (no overflow), maximum 1fr (equal width), auto-fit makes items grow to fill space, no media queries needed (intrinsic responsiveness). Key: minmax(min(250px, 100%), 1fr) allows single-column mobile layout when screen < 250px. For gaps: add gap: 1rem. This is "RAM" grid (Repeat, Auto-fit, Minmax). Works for cards, products, images. Add media queries only for major layout changes (sidebar visibility).

Common causes: Items have explicit grid-row/grid-column values that conflict or overlap (check for grid-row: 1 / 3 overlapping grid-row: 2 / 4), grid-auto-flow is not set appropriately (use dense for backfilling), grid-template-rows not defined (rows are auto-sized, may collapse), items have margins pushing them out of cells, z-index causing visual stacking issues. Fix: remove explicit placements to test auto-flow, define grid-template-rows explicitly, use grid-auto-rows for consistent row height, check for margin/padding conflicts. Use browser DevTools Grid inspector to visualize grid lines and item placement. Overlap can be intentional (layered designs) or bugs - inspect carefully.

Yes, and it is recommended! Grid for two-dimensional page structure (rows AND columns), Flexbox for one-dimensional component internals (alignment within cells). Common pattern: Grid defines major layout areas (header, sidebar, main, footer), each area uses Flexbox internally (center content, align items, space elements). Example: display: grid for container, then .header { display: flex; justify-content: space-between; } for nav items. Nested approach: Grid for card layout, Flexbox inside each card for content alignment. Do not use Grid as Flexbox replacement or vice-versa - use the right tool. Modern layouts use both: Grid for structure, Flexbox for behavior.