CSS Grid Generator — Visual Layout Builder with Live Preview

fr stands for 'fraction of the free space'. When you write grid-template-columns: 1fr 2fr, the second column gets twice as much of the remaining space as the first (after any fixed-size tracks are laid out). Unlike percentages, fr accounts for gaps automatically. It's the go-to unit for flexible grid layouts.

Grid is a two-dimensional layout system: you define rows and columns simultaneously and can place items into cells. Flexbox is one-dimensional. Use grid for anything that has a real 2D structure — dashboards, card galleries, magazine layouts, whole-page templates. Use flexbox for aligning a row or column of items.

Set grid-column: span 2 (or span N) to make an item take N columns starting from the auto-placed position. To place it at a specific column, use grid-column: 2 / span 2 (start at line 2, span 2 tracks). Same syntax for grid-row. This tool exposes those directly in the item panel.

min-content sizes the track to the largest unbreakable chunk of content inside it (usually the longest word). max-content sizes it to the widest the content wants to be if it never wrapped. Useful for text-driven columns where you don't want awkward mid-word breaks or unnecessarily wide columns.

Yes. When you use equal 1fr columns, the tool emits shortcuts like grid-cols-3. Custom track sizes fall back to arbitrary-value syntax like grid-cols-[200px_1fr_100px]. Both forms are valid Tailwind v3+ classes.