CSS Grid Layout is the most powerful layout system available in CSS. It's a two-dimensional system that can handle both columns and rows simultaneously — something no other layout method can do natively. This guide covers everything you need to know to use CSS Grid effectively.
What is CSS Grid?
CSS Grid is a layout module that allows you to divide a page into major regions and define the relationship between them in terms of size, position, and layer. Think of it as a spreadsheet-like canvas where you can place items with precision.
Unlike Flexbox which is one-dimensional (either a row or a column), Grid excels at creating complex two-dimensional layouts without nested containers or hacky workarounds.
Basic Terminology
- Grid Container — The element with
display: grid. - Grid Item — Direct children of the grid container.
- Grid Line — The dividing lines that make up the grid structure (horizontal and vertical).
- Grid Cell — The intersection of a row and a column.
- Grid Track — The space between two adjacent grid lines (a row or column).
- Grid Area — A rectangular area bounded by four grid lines.
Creating Your First Grid
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 24px;
}The fr unit distributes available space proportionally. In this example, the middle column gets twice the space of the side columns. The gap property provides consistent spacing between grid items.
Explicit vs. Implicit Grids
When you define columns and rows with grid-template-columns and grid-template-rows, you create an explicit grid. Items placed outside these bounds create implicit tracks, which are sized automatically. You can control implicit track sizes with grid-auto-rows and grid-auto-columns.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}Item Placement
Grid items can be placed explicitly using line numbers, named areas, or span keywords. This gives you pixel-perfect control over where items appear and how much space they occupy.
.item {
grid-column: 1 / 3; /* Start at line 1, end at line 3 */
grid-row: 1 / -1; /* Span from first to last row */
}
/* Or using named areas */
.container {
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }"CSS Grid is the layout tool CSS always needed. It makes complex layouts simple and simple layouts trivial."
Responsive Grids Without Media Queries
One of Grid's superpowers is the ability to create responsive layouts without media queries. Using auto-fill, auto-fit, and minmax(), you can create grids that automatically adjust to available space.
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}This single line creates a grid that automatically wraps items into new rows when there isn't enough space for a 300px minimum column — no media queries required.
Alignment and Spacing
Grid offers comprehensive alignment properties: justify-items, align-items, justify-content, align-content, justify-self, and align-self. These control positioning both within grid areas and within the grid container as a whole.
Conclusion
CSS Grid is an indispensable tool in modern web development. Its ability to create complex, responsive layouts with minimal code makes it the go-to choice for building interfaces of any scale. Combine it with Flexbox for component-level layouts, and you have everything you need for professional web design.