CSS Grid Generator

Visual CSS Grid layout builder

Columns: 3

Rows: 2

Column Sizes

Row Sizes

Column Gap: 10px

Row Gap: 10px

justify-items

align-items

Generated CSS

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 10px;
    justify-items: stretch;
    align-items: stretch;
}

Live Preview (3×2 = 6 cells)

Quick Tips:

1fr: Flexible unit, shares available space
auto: Sizes based on content
px values: Fixed pixel sizes
Use minmax() for responsive layouts

Related Tools

Box Shadow Generator

Create custom CSS box shadows with visual controls and live preview

Color Palette Generator

Generate harmonious color palettes from a seed color with multiple modes

CSS Cubic Bezier

Visual cubic-bezier curve generator for CSS animations