Grid Generator

Design complex layouts with CSS Grid

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
9
3
3
1rem

CSS Code

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
    justify-items: stretch;
    align-items: stretch;
    justify-content: start;
    align-content: start;
    grid-auto-flow: row;
}

Tailwind Classes

<div className="grid grid-cols-3 grid-rows-3 gap-4 justify-items-stretch items-stretch justify-start content-start grid-flow-row">