{"id":390907,"date":"2021-05-12T14:05:00","date_gmt":"2021-05-12T20:05:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=390907"},"modified":"2025-12-17T08:04:56","modified_gmt":"2025-12-17T15:04:56","slug":"css-grid-layout-guide","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-grid-layout-guide\/","title":{"rendered":"CSS Grid Layout Guide"},"content":{"rendered":"\n

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.<\/p>\n\n\n\n

Reference this guide a lot? Here’s a high-resolution image you can print!<\/a><\/p>\n\n\n\n\n\n\n\n

\n\n\n

Introduction<\/h3>\n\n\n

CSS Grid Layout (aka \u201cGrid\u201d or “CSS Grid”), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. CSS has always been used to layout our web pages, but it\u2019s never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance).<\/p>\n\n\n\n

CSS Flexbox<\/a> is also a very great layout tool, but its one-directional flow has different use cases<\/a> \u2014 and they actually work together<\/a> quite well! CSS Grid is the very first CSS module created specifically to solve the layout problems we\u2019ve all been hacking our way around for as long as we\u2019ve been making websites.<\/p>\n\n\n\n

The intention of this guide is to present CSS Grid concepts as they exist in the latest version of the specification. So, we will not cover the out-of-date Internet Explorer syntax<\/a> or other historical hacks.<\/p>\n\n\n\n

\n\n\n

Key Terms<\/h3>\n\n\n

Before diving into the concepts of CSS Grid, it\u2019s important to understand the terminology. Since the terms involved here are all kinda conceptually similar, it\u2019s easy to confuse them with one another if you don\u2019t first memorize their meanings defined by the CSS Grid specification. But don\u2019t worry, there aren\u2019t many of them.<\/p>\n\n\n\n

Grid Container<\/summary>\n

The element on which display: grid<\/code> is applied. It\u2019s the direct parent of all the grid items. In this example container<\/code> is the grid container.<\/p>\n\n\n\n

<div class=\"container\">\n  <div class=\"item item-1\"> <\/div>\n  <div class=\"item item-2\"> <\/div>\n  <div class=\"item item-3\"> <\/div>\n<\/div><\/code><\/pre>\n<\/details>\n\n\n\n
Grid Item<\/summary>\n
The children (i.e. direct<\/em> descendants) of the grid container. Here the item<\/code> elements are grid items, but sub-item<\/code> isn\u2019t.<\/p>\n\n\n\n
<div class=\"container\">\n  <div class=\"item\"> <\/div>\n  <div class=\"item\">\n    <p class=\"sub-item\"> <\/p>\n  <\/div>\n  <div class=\"item\"> <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
<\/p>\n<\/details>\n\n\n\n
Grid Line<\/summary>\n
The dividing lines that make up the structure of the grid. They can be either vertical (\u201ccolumn grid lines\u201d) or horizontal (\u201crow grid lines\u201d) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n<\/details>\n\n\n\n
Grid Track<\/summary>\n
The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here\u2019s the grid track between the second and third-row grid lines.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n<\/details>\n\n\n\n
Grid Area<\/summary>\n
The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here\u2019s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n<\/details>\n\n\n\n
Grid Cell<\/summary>\n
The space between two adjacent row and two adjacent column grid lines. It\u2019s a single \u201cunit\u201d of the grid. Here\u2019s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.<\/p>\n\n\n\n
\"\"<\/figure>\n<\/details>\n\n\n\n
\n\n\n
CSS Grid Properties<\/h3>\n\n\n
\n
\n
\"\"<\/figure>\n\n\n
Parent Container Properties<\/h4>\n\n\n
display<\/code><\/summary>\n
Defines the element as a grid container and establishes a new grid formatting context for its contents.<\/p>\n\n\n\n
Values:<\/p>\n\n\n\n