CSS Grid
In this page:
Setting the Grid Container
To enable CSS Grid, you apply the display: grid property to your parent container, and define your grid columns and rows using grid-template-columns and grid-template-rows.
Note: Use fractional (fr) units to divide grid columns proportionally without needing to calculate percentages.
Warning: Grid properties must be applied to the parent container to control the layout of its child items.
Example: Setting the Grid Container
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
</div>Grid Columns and Row Spans
By default, grid items are dropped into the next available grid box in sequence. You can stretch individual grid items across multiple columns or rows using grid-column and grid-row properties.
Note: Use the span keyword (like grid-column: span 2) to easily stretch an element across multiple grid columns.
Warning: Make sure your column span values do not exceed the total number of columns in your grid, as it will distort your layout.
Example: Grid Columns and Row Spans
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
background: #eef;
padding: 10px;
}
.wide {
grid-column: span 2;
background: seagreen;
color: white;
padding: 10px;
}
.container > div:not(.wide) {
background: mediumpurple;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="wide">Wide</div>
<div>Normal</div>
</div>Fluid Grids with auto-fit and minmax
Creating responsive layouts with media queries can be tedious. CSS Grid provides auto-fit and minmax functions that allow you to build fully responsive, fluid grids that scale and wrap your cards automatically based on screen size, with just a single line of code.
Note: Combine repeat(), auto-fit, and minmax() to build self-responsive card grids that do not require any media queries.
Warning: If your minmax minimum value is too large, your columns can still overflow on smaller mobile screens.
Example: Fluid Grids with auto-fit and minmax
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: mediumseagreen;
color: white;
padding: 16px;
}
</style>
<div class="container">
<div>Card</div>
<div>Card</div>
<div>Card</div>
</div>Structuring Layouts with grid-template-areas
The grid-template-areas property provides an intuitive, visual way to build website layouts. You define a text-based map of your page layout (using names like header or sidebar), and assign your elements to those areas using the grid-area property.
Note: Keep your grid area map readable by indenting your strings in your CSS.
Warning: Ensure your grid area names are written as complete, rectangular blocks, or the browser will fail to parse the layout map.
Example: Structuring Layouts with grid-template-areas
<style>
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content";
gap: 6px;
}
.header {
grid-area: header;
background: steelblue;
color: white;
padding: 10px;
}
.sidebar {
grid-area: sidebar;
background: seagreen;
color: white;
padding: 10px;
}
.content {
grid-area: content;
background: goldenrod;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>Grid vs. Flexbox: Which is Best?
While both layout systems are incredibly useful, they have different jobs. Flexbox is designed for one-dimensional layouts (aligning items along a single horizontal row or vertical column). CSS Grid is designed for two-dimensional layouts (aligning columns and rows simultaneously).
Note: As a rule of thumb, use CSS Grid to build your major website layouts and columns, and Flexbox for small, single-line menus.
Warning: Do not attempt to build complex, two-dimensional layout grids using Flexbox, as managing wrap offsets can easily break.
Example: Grid vs. Flexbox: Which is Best?
<style>
.flex-row {
display: flex;
background: #eef;
padding: 10px;
margin-bottom: 10px;
}
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
background: #efe;
padding: 10px;
gap: 8px;
}
.flex-row div, .grid-layout div {
background: steelblue;
color: white;
padding: 10px;
}
</style>
<div class="flex-row">
<div>One-dimensional row</div>
</div>
<div class="grid-layout">
<div>Two-dimensional grid</div>
</div>- Applying grid template column properties to child elements instead of the parent grid container.
- Writing invalid area names inside grid-template-areas, such as creating non-rectangular or overlapping areas.
- Using CSS Grid to build simple, single-line menus when Flexbox is much better suited.
- Enable CSS Grid by applying display: grid to your parent container.
- Define columns and rows using grid-template-columns and grid-template-rows, and adjust element spans using grid-column and grid-row.
- Use auto-fit and minmax() to build self-responsive grids, and grid-template-areas to build visually mapped page layouts easily.
Standard CSS Grid layout properties and named area systems are supported natively by all modern web browsers.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: