⊞ CSS Grid Generator

CSS Grid is for two-dimensional layouts — controlling both rows and columns simultaneously. Flexbox is for one-dimensional layouts — a single row or single column. Use Grid when: laying out the overall page structure (header, sidebar, main, footer), creating card grids, dashboard widgets, or any layout where items need to align on both axes. Use Flexbox when: distributing items in a navigation bar, centering elements, creating a single row of buttons, or handling flexible content that wraps to new lines. The most common pattern: Grid for the page macro layout, Flexbox for component micro layout.

fr (fractional unit) represents a fraction of the available free space in the grid container. display: grid; grid-template-columns: 1fr 2fr 1fr creates three columns — the middle takes twice as much space as each side column. They divide the container after any fixed sizes are subtracted. grid-template-columns: 200px 1fr allocates 200px to the first column, and all remaining space to the second. Multiple fr values divide proportionally: 1fr 1fr 1fr = three equal columns. fr is the most important CSS Grid unit to understand — it enables responsive column layouts without media queries.

grid-template-areas lets you name grid regions and place elements by name instead of by line numbers. Define the layout: grid-template-areas: 'header header' 'sidebar main' 'footer footer'. Then assign elements: header { grid-area: header; } main { grid-area: main; } sidebar { grid-area: sidebar; }. The layout can be redefined at breakpoints by reassigning the template-areas string. This is the most readable way to define complex layouts — the ASCII art area definition visually represents the actual page layout.

Both create as many columns as fit, but they differ when there is extra space. repeat(auto-fill, minmax(200px, 1fr)): creates as many 200px columns as fit, and if there is leftover space, it creates empty tracks. repeat(auto-fit, minmax(200px, 1fr)): creates only as many columns as there are items, and empty tracks collapse — the existing items grow to fill all space. For a card grid where you always want cards to fill the row: auto-fit. For a grid where you want consistent column counts regardless of item count: auto-fill.

grid-column: span 2 makes an item span 2 columns. grid-column: 1 / 3 places the item from column line 1 to line 3 (spanning 2 columns). grid-row: span 2 spans 2 rows. grid-column: 1 / -1 spans from the first to the last line (full width). Negative line numbers count from the end. For a featured card in a grid that should span the full width: .featured { grid-column: 1 / -1; } — this works regardless of how many columns the grid has.

Justify controls the inline axis (horizontal by default). Align controls the block axis (vertical by default). justify-content distributes grid columns within the container. align-content distributes grid rows within the container. justify-items positions items within their cell horizontally. align-items positions items within their cell vertically. justify-self and align-self override per individual grid item. This is identical to Flexbox semantics — the same axis naming system. The mnemonic: justify = horizontal (like left-justified text), align = vertical.

The Flexbox Generator handles one-dimensional layouts that complement Grid structure. The Responsive Breakpoints tool provides standard viewport widths for grid breakpoint planning. The CSS Unit Converter handles the px-to-rem conversions common in gap and padding values. The Aspect Ratio Calculator helps maintain proportional card dimensions in grid layouts. The Box Shadow Generator styles individual grid cells and cards. All are in the Dev Tools CSS section.