When an interface needs to align elements in both rows and columns at once, think of a product grid, a dashboard, or the overall skeleton of a page with a header, a sidebar, and a content area, CSS Grid is the native tool built for exactly that. Before it existed, this kind of two-dimensional alignment was hacked together with floats or hand-calculated column widths, and it broke the moment the content changed.
Grid turns on with a single declaration on a container. From there, every direct child of that container becomes a grid item, ready to be placed on the rows and columns the parent defines. The following glossary entries each cover one part of this tool, from grid-template-columns, which draws the columns, to the comparison with Flexbox.
Definition
CSS Grid, or Grid Layout, is a two-dimensional layout system: it handles horizontal and vertical alignment at the same time, inside a single grid. That is the key difference with Flexbox, which aligns items along one axis at a time, either a row or a column. You turn Grid on with the display property, set to grid or inline-grid, on a parent element called the grid container. Its direct children automatically become grid items, and they already fall into the generated cells without needing a single extra property.
A minimal syntax
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Three properties are enough for a working grid. display: grid declares the container. grid-template-columns sets the number and width of the columns, here three equal columns. And gap adds space between cells without needing margins on every child, and without the usual fix for the last item's margin overflowing the container. The number of rows is inferred automatically from the number of children unless you set it explicitly with grid-template-rows.
A full page layout example
.page {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 64px 1fr;
min-height: 100vh;
}
.header {
grid-column: 1 / -1;
}This page skeleton sets two columns, a fixed 240 pixel sidebar and a content area that takes the rest of the width, plus two rows, a 64 pixel header and a content area that takes the rest of the height. The header itself spans both columns thanks to grid-column: 1 / -1, a syntax covered in detail in the entry about placing items. This kind of structure, with zones of different sizes fitting together cleanly, is exactly what Grid handles naturally, and what a one-dimensional system would have forced you to stack artificially. Our HTML and CSS course builds exactly this kind of page skeleton, columns and rows included, until the syntax becomes a reflex rather than a calculation to redo on every project.
Grid is not a universal replacement for Flexbox
The most common mistake when discovering Grid is wanting to use it everywhere, including cases where Flexbox is enough and needs fewer properties, like aligning a row of buttons or centering a logo next to a menu.
Grid and overflowing content
A grid does not need to cover the whole page, or even its entire container. An item that does not fit the number of columns or rows you planned does not break the layout: Grid automatically creates extra implicit rows to hold it, with a default height that adjusts to the content. This behavior can be surprising the first time, especially when you expect an error or visual overflow, while the grid simply absorbs the extra item into a new row.
Frequently asked questions
No. As soon as the parent has display: grid, all of its direct children automatically become grid items and spread across the available cells, in HTML order. You only add properties to children when you want to control exactly where they sit or how much space they span in the grid.
Visually, yes: Grid reproduces a row and column structure without the constraints of an HTML table. But a table element remains the right choice when the data is genuinely tabular, for example a numeric export, because it carries a meaning that a purely visual Grid does not give to assistive technology.
Yes, a grid item can itself become a grid container with its own display: grid declaration. It then creates a grid completely independent from its parent's, with its own columns and rows. If you instead want it to use the tracks already defined by the parent grid, that is the role of the subgrid keyword, covered in a separate glossary entry.