CSS Grid

📖 CSS Grid

Introduction

CSS Grid is a two-dimensional layout system that lets you control both rows and columns at the same time. It replaces older layout techniques like floats and positioning for complex designs. CSS Grid consists of a grid container and its direct children (grid items). To create a grid, apply display: grid; or display: inline-grid; to a container element.

Understanding the Grid Structure

The grid container defines the structure of rows, columns, and gaps. Grid items are placed directly inside this container. You define how many rows and columns the grid has, and then place items within that structure.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Set Up a Grid Container

You must define both grid-template-columns and grid-template-rows for grid-template-areas or any precise layout to work. These properties define the size and number of columns and rows.

.container {
  display: grid;
  grid-template-columns: 200px auto minmax(100px, 300px);
  grid-template-rows: 80px auto 60px;
  gap: 10px;
}

This creates three columns: 200px, a flexible column, and a column between 100px and 300px. The rows are 80px at the top, flexible in the middle, and 60px at the bottom.

Placing Items with Grid Lines

Sometimes you need more control. Use grid-column and grid-row to place items by line numbers. You can use positive or negative numbers to count from the start or end of the grid.

.item1 {
  grid-column: 1 / 3; /* spans columns 1-2 */
  grid-row: 1 / 2;    /* first row */
}
.item2 {
  grid-column: -2 / -1; /* last column */
  grid-row: 2 / 3;      /* second row */
}

Why? This lets you place items precisely, even in grids without named areas or when you want to overlap or span items dynamically.

Using Grid Template Areas

Named areas help you place items without worrying about grid line numbers. But you must define columns and rows that match the area map.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  grid-template-rows: 80px auto 60px;
  grid-template-areas:
    "header header header"
    "nav main ads"
    "footer footer footer";
  gap: 10px;
}

This defines a 3x3 grid where the header and footer span all columns, the nav fills the first column of the middle row, the main content fills the middle column, and ads fill the last column.

To place an item:

.header {
  grid-area: header;
}
.main {
  grid-area: main;
}

Conceptual Grid Demo

The image below shows an example of a CSS Grid overlay as seen in browser DevTools. Use this as a guide for what to look for when inspecting your own grid layouts. The grid overlay highlights area names, grid lines, and cell boundaries to help you understand and debug your design.

Grid overlay showing area names and grid lines as seen in DevTools — Example of a grid overlay as seen in browser developer tools

Tip: Click "Edit on CodePen" in the embed toolbar if you'd like to modify the code directly in CodePen.

Tip: In DevTools, enable the grid overlay in the Layout panel (or Styles tab, depending on your browser) to view grid lines and area names on your page.

Child Properties

Grid items can also have properties that control their placement and alignment within the grid.

Aligning Content Inside Cells

Grid also gives you control over alignment inside cells.

.item {
  justify-self: center; /* center horizontally */
  align-self: end;      /* align bottom of cell */
}

Use justify-self for horizontal alignment and align-self for vertical alignment of individual items.

Thinking in Grid: Example 1 — A Simple Page Frame

Let's apply Grid to create a basic page structure with a header, sidebar, main content, and footer. This is not your assignment — but it models how to break down a page using named areas and grid sizing.

<div class="page-grid">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

.page-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 60px auto 40px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

Tip: Think about your layout in terms of grid areas first — this helps you plan the structure before placing any content.

Thinking in Grid: Example 2 — Product Grid Starter

Now let's model a product grid layout that resembles, but does not match, your assignment. This uses 4 columns and 2 rows to place product cards with spans and precise positioning.

<div class="products-grid">
  <div class="product feature">Featured</div>
  <div class="product">Product A</div>
  <div class="product">Product B</div>
  <div class="product">Product C</div>
</div>

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
}

.feature {
  grid-column: 1 / 5; /* spans all 4 columns */
  grid-row: 1 / 2;
}

.product:nth-child(2) {
  grid-column: 1 / 3; /* spans 2 columns */
  grid-row: 2 / 3;
}

.product:nth-child(3) {
  grid-column: 3 / 5; /* spans 2 columns */
  grid-row: 2 / 3;
}

This layout gives you:

A featured product that spans the full width of the grid on the first row
Two products on the second row, each spanning two columns

Tip: When designing a product grid, sketch the grid lines and think about how wide and tall each product should be. Plan your grid-column and grid-row values before writing CSS.

Working Example: CSS Grid Page Layout

Here's a complete example of a CSS Grid page layout that includes a header, navigation, main content area, and footer. This demonstrates how to use grid areas effectively for page layout.

Tip: Use DevTools (Ctrl + Shift + I) to view grid and flex overlays. Click "Edit on CodePen" to fork and modify the code directly.

Summary / Takeaways

CSS Grid lets you define complex page layouts with named areas, rows, columns, and precise placement using grid lines. Understanding how to size your grid and place items is essential for controlling your design. Use DevTools to see grid overlays and refine your layout as you build.

Key Terms

Grid Container: The parent element with display: grid that defines the grid structure.
Grid Item: A direct child of the grid container that is placed within the grid.
Grid Line: The horizontal or vertical lines that define rows and columns, used for positioning items.
Grid Area: A named section of the grid made of one or more cells.

Additional Resources

Last updated: June 24, 2025 at 7:38 AM