CSS Grid Layout is a two-dimensional layout system for the web that divides a page into major regions or defines relationships between HTML elements in terms of size, position, and layer. Unlike one-dimensional systems like Flexbox, Grid handles both rows and columns simultaneously, making it the ideal tool for complex page layouts. The real power lies in how little code is needed to create sophisticated, responsive designs—no more nested divs or float-based hacks. Grid's fraction units, explicit line-based placement, and flexible auto-placement algorithm turn what once required dozens of lines into a few declarations, while subgrid and masonry modes push the boundaries even further.
What This Cheat Sheet Covers
This topic spans 20 focused tables and 114 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Defining the Grid Container
The grid container is the parent element where you define the overall grid structure. These properties establish how many rows and columns exist, their sizes, and how they behave.
| Property | Example | Description |
|---|---|---|
.container { display: grid; } | Creates a block-level grid container where direct children become grid items automatically | |
.widget { display: inline-grid; } | Creates an inline-level grid container that sits inline with surrounding text or elements | |
grid-template-columns: 200px 1fr 2fr; | • Defines the explicit column track sizes • can use fixed units, fr units, percentages, or keywords | |
grid-template-rows: 100px auto 200px; | • Defines the explicit row track sizes • rows expand/shrink based on content when set to auto |