CSS Grid Generator

You can use any valid CSS grid-template values: fixed units (px, rem, em), flexible fractions (fr), the repeat() function, minmax(), auto, and combination expressions. For example: repeat(3, 1fr), 200px 1fr auto, or minmax(100px, 1fr) 2fr.

Flexbox is one-dimensional (row OR column), best for components and smaller layouts. Grid is two-dimensional (rows AND columns), ideal for page-level layouts. Use the Grid Generator for overall page structure and the Flexbox Generator for component-level layouts.

fr (fraction) distributes available space proportionally. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle is twice as wide as the sides. fr units work like flex-grow in Flexbox — they divide remaining space after fixed-size tracks (px, em, etc.) are accounted for.

Yes. CSS Grid supports nesting — any grid cell can itself become a grid container. Just apply display: grid to a child element. This allows complex layouts like a main page grid with individual card grids inside each cell.

The preview area resizes with the iframe container. Try dragging the resize handle on the page to see how your grid adapts. Using fr units and minmax() in your definitions will show responsive behavior naturally.