CSS Grid Generator — free
Generate CSS Grid layout code visually.
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px;
How to use CSS Grid Generator
Set Your Grid Dimensions
Enter the number of columns and rows in the input fields at the top of the generator. Use the 'Columns' spinner control to set values from 1-12, and the 'Rows' spinner to define your grid height. Click 'Apply' to update the preview canvas instantly.
Configure Grid Gaps and Spacing
Adjust the 'Gap' value using the slider or input field to control space between grid items (measured in pixels). Set column gap and row gap separately using the dropdown toggles. Watch the preview update in real-time as you modify spacing values.
Position and Span Grid Items
Click on individual grid cells in the preview area to select them. Use the 'Column Span' and 'Row Span' controls to make items stretch across multiple cells. The grid number indicator shows your current selection position.
Customize Item Styling
Access the color picker to change background colors for individual grid items. Toggle the 'Show Grid Lines' checkbox to display or hide the grid overlay. Modify padding values for all items using the padding control on the right sidebar.
Copy and Export Your CSS Code
Click the 'Copy Code' button to copy the complete CSS Grid code to your clipboard. Select between 'CSS Only', 'HTML + CSS', or 'SCSS' format using the dropdown menu above the code editor. Paste directly into your project files.