What is CSS Grid?

CSS Grid is a 2-dimensional layout system for the web. It lets you arrange elements in rows and columns easily, eliminating many hacks previously used for complex layouts.

Getting Started

Define a grid container:

display: grid;
grid-template-columns: 1fr 2fr 1fr;

Place items explicitly:

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

Grid in Practice

CSS Grid makes responsive and adaptive web design much simpler. Combine it with media queries for powerful results.

Experiment with the properties to understand the power and flexibility CSS Grid provides.