← Back to CSS Course | Chapter 11: Grid | Lesson 1 of 10

CSS Grid

Imagine building a large display shelf for your shop. If you only use Flexbox, it is like stacking boxes on a single long shelf. It works well horizontally, but aligning items vertically across separate shelves is difficult. CSS Grid is like building an organized grid panel of drawers. You define the exact columns and rows of your grid, and drop your items into specific grid boxes. It is the most powerful layout tool in CSS, designed specifically to build complex, two-dimensional grids with precise column and row alignments.

In this page:

  1. Setting the Grid Container
  2. Grid Columns and Row Spans
  3. Fluid Grids with auto-fit and minmax
  4. Structuring Layouts with grid-template-areas
  5. Grid vs. Flexbox: Which is Best?
Syntax
css 
selector {
  display: grid;
  grid-template-columns: track-sizes;
  grid-template-rows: track-sizes;
  gap: length;
}

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.
  • Accepted values:
  • grid-template-columns — track sizes such as 1fr 2fr or repeat(3, 1fr)
  • fr — fraction of the available space
  • minmax(min, max) — flexible track range
  • auto-fill | auto-fit — as repeat() counts
  • gap — length between rows and columns
  • grid-column | grid-row — item placement like 1 / 3
Warning: Grid properties must be applied to the parent container to control the layout of its child items.

Example: Setting the Grid Container

css 
<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.
  • Accepted values:
  • span <n> — spans n tracks
  • grid-column: span 2 — two columns wide
  • grid-row: span 3 — three rows tall
  • grid-column: 1 / span 2 — starts at line 1
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

css 
<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.
  • Accepted values:
  • repeat(3, 1fr) — three equal tracks
  • repeat(auto-fill, minmax(200px, 1fr)) — as many as fit
  • repeat(auto-fit, minmax(200px, 1fr)) — fit and collapse empty tracks
  • repeat(2, 100px 200px) — repeats a pattern
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

css 
<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.
  • Accepted values:
  • grid-template-areas: "header header" "nav main" — strings define rows
  • <name> — repeated to span cells
  • . — an empty cell
  • none — default
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

css 
<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?

css 
<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>
Live Example
Related Topics

CSS RWD Grid View · CSS Flex Responsive · CSS Flex Items · CSS Flex Container

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Applying grid template column properties to child elements instead of the parent grid container.
  2. Writing invalid area names inside grid-template-areas, such as creating non-rectangular or overlapping areas.
  3. Using CSS Grid to build simple, single-line menus when Flexbox is much better suited.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson CSS Flex Responsive Next Lesson → CSS Grid Container

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.