CSS Grid Generator

CSS Grid is a two-dimensional layout system. Set display: grid on a container, define columns with grid-template-columns and rows with grid-template-rows. Place items using grid-column and grid-row. The generator creates layouts visually.

Use auto-fill or auto-fit with minmax(): grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). This creates as many 250px+ columns as fit, automatically adjusting to screen width without media queries.

fr (fraction) distributes available space proportionally. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle is twice as wide. 1fr is similar to flex-grow: 1 but works in two dimensions.

Use grid-column: span 2 to span two columns, or grid-row: span 3 for three rows. Named lines work too: grid-column: 1 / 3 spans from line 1 to line 3. The generator lets you drag to resize items across cells.

A visual way to define layouts using named areas: grid-template-areas: "header header" "sidebar main" "footer footer". Then assign elements: grid-area: header. The generator creates area maps with a drag-and-drop interface.