How to create 12 column grid in css

CssHow-ToBeginner · 3 min read

How to Create a 12 Column Grid in CSS Easily

To create a 12 column grid in CSS, use display: grid; on a container and set grid-template-columns: repeat(12, 1fr);. This divides the container into 12 equal columns that you can place content into.

📐

Syntax

Use display: grid; to turn a container into a grid. Then define columns with grid-template-columns. The value repeat(12, 1fr) means 12 columns each taking equal space.

display: grid;: activates grid layout.
grid-template-columns: sets the number and size of columns.
repeat(12, 1fr): creates 12 equal columns using fractional units.

css

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem; /* space between columns */
}

💻

Example

This example shows a container with 12 equal columns. Each box inside spans one column and is styled for visibility.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>12 Column Grid Example</title>
<style>
  .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .box {
    background-color: #4a90e2;
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
  </div>
</body>
</html>

Output

A horizontal row of 12 blue boxes labeled 1 to 12, evenly spaced across the page.

⚠️

Common Pitfalls

Common mistakes when creating a 12 column grid include:

Not setting display: grid; on the container, so columns don’t appear.
Using fixed widths instead of fractional units, which breaks responsiveness.
Forgetting to add gap for spacing, making columns stick together.
Placing more than 12 items without spanning columns, causing layout overflow.

css

/* Wrong: No grid display */
.container {
  grid-template-columns: repeat(12, 1fr);
}

/* Right: Add display grid */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

📊

Quick Reference

Summary tips for a 12 column grid:

Use display: grid; on the container.
Set grid-template-columns: repeat(12, 1fr); for equal columns.
Add gap for spacing between columns.
Use grid-column: span n; on children to span multiple columns.
Test responsiveness by resizing the browser.

✅

Key Takeaways

Use display: grid and grid-template-columns: repeat(12, 1fr) to create 12 equal columns.

Add gap to create space between columns for better readability.

Ensure the container has display: grid; or columns won’t form.

Use grid-column: span n; on child elements to make them span multiple columns.

Test your grid on different screen sizes for responsive design.