CSS Grid Generator

CSS Grid is a two-dimensional layout system that lets you define rows and columns, then place child elements into specific cells or named areas. This tool generates the CSS code for a grid container and its children.

Grid Tracks

• Columns & Rows: Each track defines a column width or row height. Use fr units for flexible sizing, px for fixed, or auto for content-based sizing
• fr unit: Distributes available space proportionally. 1fr 2fr gives the second column twice the width of the first
• Gaps: The space between grid tracks. Column gap is horizontal spacing, row gap is vertical

Grid Areas

• Named areas let you define a visual layout map using grid-template-areas
• Select an area name and click cells in the preview to assign them
• Areas must form contiguous rectangles — L-shapes or disconnected regions are invalid
• Unassigned cells are represented by a dot (.) in the generated CSS

Tips

• Start with the presets to see common layout patterns, then customize
• Use 1fr for equal-width columns and auto for content-sized tracks
• Combine fr and fixed units (e.g., 250px 1fr) for sidebar layouts
• Grid areas make complex layouts easier to read and maintain

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.