CSS Grid Generator

fr is a 'fraction of the free space' in the grid. 'repeat(3, 1fr)' makes three columns that split the available width equally. '1fr 2fr' makes the second column twice as wide as the first. Unlike percentages, fr accounts for gaps automatically, so columns never overflow.

Use the custom column template field. Enter tracks separated by spaces — '200px 1fr' gives a fixed 200px sidebar and a flexible main column; '1fr 2fr 1fr' gives a wide center column. You can mix px, fr, %, and keywords like auto. The custom template overrides the column slider.

Grid is two-dimensional — it controls rows and columns at once — so it's ideal for page layouts and card grids. Flexbox is one-dimensional, best for a single row or column that wraps. They work well together: Grid for the overall page, Flexbox inside individual cells.