How to create three column layout with grid in css

CssHow-ToBeginner · 3 min read

How to Create a Three Column Layout with CSS Grid

Use display: grid; on a container and set grid-template-columns to three columns, for example grid-template-columns: 1fr 1fr 1fr;. This creates three equal-width columns inside the container.

📐

Syntax

To create a three column layout with CSS Grid, you use the display: grid; property on a container element. Then, define the columns using grid-template-columns. Each value represents a column width.

1fr means one fraction of the available space.
You can use fixed units like px or relative units like em.
Separate each column size with a space.

css

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

💻

Example

This example shows a container with three equal columns. Each column has a colored box with text to visualize the layout.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Column Grid</title>
<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  .box {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    border-radius: 0.5rem;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">Column 1</div>
    <div class="box">Column 2</div>
    <div class="box">Column 3</div>
  </div>
</body>
</html>

Output

A webpage with three green boxes side by side labeled 'Column 1', 'Column 2', and 'Column 3', spaced evenly in a row.

⚠️

Common Pitfalls

Common mistakes when creating a three column grid include:

Not setting display: grid; on the container, so columns won't form.
Using commas between column sizes in grid-template-columns (commas are not allowed).
Forgetting to add some gap or padding, which can make columns look cramped.
Using fixed widths without considering responsiveness.

css

/* Wrong: commas used, no grid display */
.container {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Right: no commas, display grid set */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

📊

Quick Reference

Summary tips for three column grid layout:

Use display: grid; on the container.
Set grid-template-columns with three values for columns.
Use fr units for flexible widths.
Add gap for spacing between columns.
Test responsiveness by resizing the browser.

✅

Key Takeaways

Set the container's display to grid to enable grid layout.

Define three columns using grid-template-columns with three values.

Use fractional units (fr) for equal flexible column widths.

Avoid commas in grid-template-columns; separate values with spaces.

Add gap to create space between columns for better readability.