← Back to Chapters

Full CSS Grid Layout Tutorial

? Full CSS Grid Layout Tutorial

⚡ Quick Overview

CSS Grid Layout is a powerful two-dimensional layout system for the web. It lets you arrange items into rows and columns with precise control, making it easier to create complex page layouts, dashboards, galleries, and responsive designs compared to older techniques like floats or manual positioning.

  • Works in both rows and columns.
  • Perfect for page-level layout and complex grids.
  • Gives you explicit control over where each item goes.

? Key Concepts

? Grid Container

A Grid Container is any element where you apply display: grid or display: inline-grid. It creates a new grid context for its direct children (the grid items).

  • display: Set to grid or inline-grid.
  • grid-template-columns: Defines the number and width of columns.
  • grid-template-rows: Defines the number and height of rows.
  • grid-template-areas: Names grid areas for layout.
  • gap / row-gap / column-gap: Controls spacing between rows and columns.
  • justify-content: Aligns the whole grid horizontally in its container.
  • align-content: Aligns the whole grid vertically in its container.
  • place-content: Shorthand for justify-content and align-content.

? Grid Items

Grid Items are the direct children of a grid container. Each item can be placed, resized, and aligned independently using grid item properties.

  • grid-column / grid-row: Set the starting and ending grid lines across columns or rows.
  • grid-area: Assigns an item to a named grid area.
  • justify-self / align-self: Align a single item along the row/column axis.
  • place-self: Shorthand for align-self and justify-self.

? Syntax & Basic Structure

Typically, you have one element acting as the grid container and several child elements as grid items:

  1. Write HTML with a wrapper element (e.g., <div class="grid-container">).
  2. Apply display: grid to that wrapper.
  3. Define columns/rows using grid-template-columns and grid-template-rows.
  4. Optionally span or position items using grid-column and grid-row.

? Code Example: Simple 3-Column Grid

? View Code Example 
/* Define a simple 3-column grid with equal-width tracks */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

/* Basic grid item styling */
.grid-item {
padding: 12px;
background: #e5e7eb;
text-align: center;
font-weight: 600;
}

<!-- HTML: 6 items inside the grid container -->
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

? Live Output Preview (3-Column Grid)

Below is a simple live preview of a 3-column grid, similar to the code above:

1
2
3
4
5
6

Each box is a grid item. The grid container uses grid-template-columns: repeat(3, 1fr), so the available width is split into three equal tracks, and items automatically flow into rows.

? Spanning Items Across Columns

You can make items span multiple columns or rows using the grid-column and grid-row properties.

? View Code Example 
/* Grid where some items span multiple columns */
.grid-span-demo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

/* Item that spans 2 columns */
.item-span-2 {
grid-column: span 2;
}

/* Item that spans full width from line 1 to 4 (1 / 4) */
.item-full {
grid-column: 1 / 4;
}

? Visual Idea of Spanning

The first item below spans two columns, and the last item spans all three columns:

Span 2 Columns
Normal
Full Width (1 / 4)

? Layout Using Grid Areas

Named grid areas make it easy to describe your layout in a more visual and semantic way. You can map sections like header, sidebar, and content directly in CSS.

? View Code Example 
/* Two-column layout using named grid areas */
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar content";
grid-template-columns: 1fr 3fr;
gap: 16px;
}

/* Map each element to a named area */
.header {
grid-area: header;
}

.sidebar {
grid-area: sidebar;
}

.content {
grid-area: content;
}

<!-- HTML structure mapped to areas -->
<div class="layout">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="content">Main Content</main>
</div>

? Advanced Grid Tips

  • Use minmax() to create flexible tracks, e.g., minmax(150px, 1fr).
  • Use auto-fit or auto-fill with repeat() for responsive grids.
  • grid-auto-rows and grid-auto-columns control the size of implicitly created tracks.
  • Set default item alignment with align-items and justify-items.
? View Code Example (Responsive Grid) 
/* Responsive card grid that wraps automatically */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}

? Common Use Cases

  • Multi-column blog layouts with sidebar and main content.
  • Image galleries and product listing pages.
  • Dashboard cards and analytics layouts.
  • Complex landing pages with multiple content sections.

✅ Tips & Best Practices

  • Use CSS Grid for overall page layout and Flexbox for aligning items inside each section.
  • Combine grid-template-areas with semantic HTML elements (<header>, <main>, <aside>) for better readability.
  • Start with a mobile-first layout (single column) and add more columns at larger breakpoints.
  • Prefer fr units for flexible tracks instead of fixed pixel widths.
  • Use gap instead of margins to separate grid items cleanly.

? Try It Yourself / Practice Tasks

  • Create a 4-column grid with equal-width columns and 2 rows of items.
  • Use grid-column: 1 / -1 to make a header span the full width of the grid.
  • Build a simple blog layout using grid-template-areas with areas like header, sidebar, content, and footer.
  • Create a responsive card grid using repeat(auto-fit, minmax()) so cards wrap nicely on smaller screens.