Frontend & CSS
CSS Grid Generator
Adjust rows, columns, and gaps, then copy layout code.
Controls
123456
Generated code
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 12px;
}
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>How to use
Set columns, rows, and gap. Preview the layout and copy the CSS and starter HTML.
Example
Choose 3 columns, 2 rows, and a 12px gap.