Introduction to CSS Grid

CSS Grid is a layout tool for arranging page content in rows and columns.

It is useful when you want to build layouts such as card grids, dashboards, sidebars, headers, footers, and simple page structures.

Why CSS Grid is useful

Normal document flow stacks block elements from top to bottom.

Flexbox helps when you need to arrange items in one main direction: a row or a column.

CSS Grid helps when you need to control two directions at the same time: rows and columns.

For example, a page with a header, sidebar, main content area, and footer is easier to describe with Grid than with margins, floats, or positioning.

What CSS Grid is

CSS Grid is a two-dimensional layout system.

That means it can control:

• columns from left to right
• rows from top to bottom

You can think of Grid as an invisible table drawn over part of your page. Your HTML elements can then sit inside the cells of that layout.

Grid container and grid items

To start using CSS Grid, add display: grid to a parent element.

That parent becomes the grid container.

Its direct children become grid items.

<div class="grid-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

Only direct children become grid items. If an element is nested deeper, it does not become a grid item unless its own parent also uses display: grid.

If you do not manually place grid items, the browser uses auto-placement. It puts each grid item into the next available cell, moving from left to right and then creating a new row when needed.

Creating columns with grid-template-columns

The grid-template-columns property defines the number and width of columns.

CSS Grid often uses the fr unit. fr means a fraction of the available space.

<div class="column-grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

<style>
  .column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .column-grid div {
    padding: 20px;
    text-align: center;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
  }
</style>

This creates two equal columns.

Here are three common column patterns:

• grid-template-columns: 1fr 1fr; creates two equal columns.
• grid-template-columns: 200px 1fr; creates a fixed sidebar and a flexible content area.
• grid-template-columns: repeat(3, 1fr); creates three equal columns without writing 1fr three times.

Creating rows with grid-template-rows

Rows are often created automatically as more items are added.

When you need specific row heights, use grid-template-rows.

<div class="row-grid">
  <div class="top-row">Fixed-height row</div>
  <div class="content-row">Auto row that grows with content</div>
</div>

<style>
  .row-grid {
    display: grid;
    grid-template-rows: 80px auto;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .row-grid div {
    padding: 16px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .content-row {
    min-height: 120px;
  }
</style>

This creates two rows:

• the first row is 80px tall
• the second row grows based on its content

If you do not set grid-template-rows, Grid still creates rows automatically when items need more space.

Using gap

The gap property creates space between grid rows and columns.

Use gap instead of adding margins to every grid item.

<div class="gap-grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

<style>
  .gap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-family: Arial, sans-serif;
  }

  .gap-grid div {
    padding: 20px;
    text-align: center;
    background-color: #fef3c7;
    border: 1px solid #d97706;
  }
</style>

This adds 20px of space between grid items, but not around the outside edge of the grid.

Simple grid layout example

This example creates a small page layout with a header, sidebar, main content area, and footer.

The header and footer use grid-column to stretch across both columns. That property is explained right after the example.

<div class="page-layout">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main content</main>
  <footer class="footer">Footer</footer>
</div>

<style>
  .page-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
  }

  .header {
    grid-column: 1 / 3;
    padding: 20px;
    background-color: #dbeafe;
  }

  .sidebar {
    padding: 40px 20px;
    background-color: #dcfce7;
  }

  .main {
    padding: 40px 20px;
    background-color: #fef3c7;
  }

  .footer {
    grid-column: 1 / 3;
    padding: 20px;
    background-color: #e5e7eb;
  }
</style>

The sidebar and main content do not have manual placement rules. They are placed automatically into the next available grid cells.

Placing items across columns

In the example above, the header and footer stretch across both columns.

This happens because they use grid-column.

Grid columns are separated by invisible vertical lines.

In a two-column grid, there are three vertical grid lines:

• line 1 is the left edge
• line 2 is between the two columns
• line 3 is the right edge

So grid-column: 1 / 3; means: start at line 1 and end at line 3.

You may also see -1 as the ending line.

In Grid, -1 means the last grid line.

<div class="full-width-grid">
  <div class="wide-item">I span the full grid width</div>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<style>
  .full-width-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .full-width-grid div {
    padding: 16px;
    text-align: center;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
  }

  .wide-item {
    grid-column: 1 / -1;
  }
</style>

grid-column: 1 / -1; means: start at the first grid line and end at the last grid line. This makes the item span the full grid width, even if the grid has more than two columns.

Grid vs Flexbox

Grid and Flexbox are both layout tools, but they are useful in different situations.

• Flexbox is best for one direction: a row or a column.
• Grid is best for two directions: rows and columns together.

Use Flexbox for things like navigation links, toolbar buttons, and small groups of items.

Use Grid for page layouts, dashboards, galleries, and card grids.

Common beginner mistakes

• Putting display: grid on the wrong element: add it to the parent container, not the individual items.
• Expecting nested elements to become grid items automatically: only direct children of the grid container become grid items.
• Forgetting gap: use gap for spacing between grid items instead of adding margins to every item.
• Using Grid for very simple alignment: if you only need to center one item or place an icon next to text, Flexbox may be simpler.

Mini practice task

Write CSS for a grid container that:

• creates three equal columns
• adds a 16px gap between items

Hint: use repeat(3, 1fr).

Short quiz with answers

1. Which CSS property turns a parent element into a grid container?
2. Which CSS property defines the size and number of columns?
3. What does gap control?

Answers:

1. display: grid
2. grid-template-columns
3. The space between grid rows and columns.

Mini practice task answer:

Small challenge

Try creating a simple dashboard layout.

1. Turn .dashboard into a grid.
2. Create two columns: 180px 1fr.
3. Add a 16px gap.
4. Make .top-bar span both columns.

<div class="dashboard">
  <div class="top-bar">Dashboard navigation</div>
  <div class="side-menu">Menu links</div>
  <div class="content-area">Main dashboard data</div>
</div>

<style>
  .dashboard {
    /* 1. Turn this into a grid */

    /* 2. Create two columns: 180px and 1fr */

    /* 3. Add a 16px gap */

    font-family: Arial, sans-serif;
  }

  .top-bar {
    /* 4. Make this span both columns */

    padding: 16px;
    color: white;
    background-color: #1f2937;
  }

  .side-menu {
    padding: 20px;
    background-color: #dbeafe;
  }

  .content-area {
    padding: 20px;
    background-color: #fef3c7;
  }
</style>

One possible answer:

Summary

• CSS Grid creates layouts with rows and columns.
• The parent with display: grid is the grid container.
• Direct children of the grid container are grid items.
• grid-template-columns defines columns.
• grid-template-rows defines rows.
• fr divides available space into flexible parts.
• gap controls space between rows and columns.
• Grid is useful for page layouts, dashboards, galleries, and card grids.