CSS Grid Generator

Create and customize grid layouts visually

grid-template-columns

grid-template-rows

gap

column-gap

row-gap

justify-items

align-items

justify-content

align-content

Number of Items

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Generated CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

About CSS Grid

CSS Grid Layout is a two-dimensional layout system that lets you organize content in rows and columns. It's perfect for creating complex layouts and can handle both large-scale and small-scale designs.

Key Concepts

Grid Container: The element that becomes a grid context
Grid Items: The direct children of the grid container
Grid Lines: The horizontal and vertical lines that create the grid
Grid Tracks: The rows and columns of the grid
Grid Areas: Named sections of the grid