Create a 12-Column Grid

Create a 12-Column Grid

The 12-column grid is the standard in web design — used by Bootstrap, Foundation, and most CSS frameworks. With CSS Grid, you can build one in just a few lines.

The Grid Container

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Twelve equal columns using repeat(12, 1fr). Items can span any number of columns to create different layouts.

Spanning Columns

/* Full width */
.col-12 { grid-column: span 12; }

/* Half width */
.col-6 { grid-column: span 6; }

/* Thirds */
.col-4 { grid-column: span 4; }

/* Quarters */
.col-3 { grid-column: span 3; }

/* Two-thirds + one-third */
.col-8 { grid-column: span 8; }

/* Any combination */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-5 { grid-column: span 5; }
.col-7 { grid-column: span 7; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }

Example Layouts

<!-- Two equal columns -->
<div class="grid-12">
    <div class="col-6">Left</div>
    <div class="col-6">Right</div>
</div>

<!-- Sidebar + Content -->
<div class="grid-12">
    <div class="col-3">Sidebar</div>
    <div class="col-9">Main Content</div>
</div>

<!-- Three cards -->
<div class="grid-12">
    <div class="col-4">Card 1</div>
    <div class="col-4">Card 2</div>
    <div class="col-4">Card 3</div>
</div>

<!-- Complex layout -->
<div class="grid-12">
    <div class="col-8">Article</div>
    <div class="col-4">Related</div>
    <div class="col-4">Box 1</div>
    <div class="col-4">Box 2</div>
    <div class="col-4">Box 3</div>
</div>

Adding Responsive Breakpoints

@media (max-width: 768px) {
    .col-6, .col-4, .col-3, .col-8, .col-9 {
        grid-column: span 12; /* Full width on mobile */
    }
}

Key Takeaways

• repeat(12, 1fr) creates a 12-column grid — the web design standard
• Use grid-column: span N to make items span N columns
• Columns that add up to 12 fill a complete row
• Add media queries to make columns stack on smaller screens