CSS Grid Property

Interactive Demo

What is CSS Grid?

CSS Grid is a two-dimensional layout system in CSS that allows you to build complex and responsive grid-based layouts. Unlike Flexbox, which works in one dimension at a time, Grid lets you define both rows and columns, giving you precise control over how elements are placed in a container.

Key Points

Two-dimensional layout system
Define rows and columns
Precise control over spacing and alignment
Powerful for building responsive layouts

Example

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

CSS Code

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}