A two-dimensional layout system for the web. It allows developers to place elements into rows and columns with precise control.
CSS Grid is a layout system that lets you create complex web layouts using rows and columns. Think of it as defining a blueprint - you specify rows and columns, then place elements exactly where you want them.
Before Grid, creating layouts required complex hacks with floats or frameworks. Grid makes it simple and intuitive.
A dashboard with sidebar, header, content, and footer used to need careful calculations or Flexbox gymnastics. CSS Grid solves this in just a few lines:
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 40px;
height: 100vh;
}
Fixed sidebar, flexible main content, responsive header/footer - done.
Define a Grid Container: Tell your container it is a grid and specify rows/columns.
Place Items: Elements automatically flow into grid cells, or you can position them precisely.
Use Flexible Units: 1fr means "one fraction of available space" - it adapts automatically.
Responsive Product Grids:
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
This automatically adjusts columns. Desktop: 4 columns. Tablet: 2 columns. Mobile: 1 column. No media queries needed.
Magazine Layouts: A featured article spanning 2 columns, smaller articles beside it - easy with Grid, painful with older methods.
Admin Dashboards: Complex layouts with sidebars, headers, widgets in specific positions.
Use Grid for two-dimensional layouts (rows AND columns). Overall page structure, complex components.
Use Flexbox for one-dimensional layouts (row OR column). Navigation bars, centering content.
Use Both: Grid for page structure, Flexbox for component internals. They complement each other.
You can create layouts that were previously impossible or required JavaScript. Major news sites like The Guardian use Grid for their complex, responsive layouts.
What required hundreds of lines now takes dozens. It is not a framework or hack - it is how layouts should work.
Firefox has the best Grid Inspector tool for visualizing your layout. Chrome DevTools shows grid overlays too. Once you understand the basics, you will wonder how you ever lived without it.