CSS 12-Column Grid Layout
Among the ways to organize the content of a web page, a 12-column grid stands out as both common and flexible, especially for responsive design.
It cuts the horizontal space on offer into 12 columns of equal width, which gives you a precise structure for placing and sizing elements.
Benefits of a 12-Column Grid
- Flexibility: Dividing 12 is easy, so halves (2 columns of 6), thirds (3 columns of 4), and quarters (4 columns of 3) are all possible.
- Responsiveness: With media queries, this grid suits responsive websites, letting them adapt to desktop, tablet, or mobile screen sizes.
- Efficiency: Design work goes faster when the grid structure is already defined.
The steps below build a basic CSS Grid layout on 12 columns:
Define the Grid Container
The grid container needs display: grid;.
Create the 12 Columns
The 12 columns are defined through the grid-template-columns property.
Writing repeat(12, [col-start] 1fr); gives 12 columns of equal width, and every column track has its start line named col-start. Piece by piece:
repeat(12, ..)— runs the track definition 12 times, producing 12 columns.[col-start]— names a grid line. The repetition yields 12 lines calledcol-start, which helps when grid items must begin at specific points.1fr— a fractional unit, worth one fraction of all the space available. All 12 columns therefore get an equal, fluid width.
Place the Grid Items
Position and size grid items across the 12 columns with grid-column.
- For an item that spans some number of columns, write
grid-column: span <number>;orgrid-column: <start-line> / span <number>;. - To say exactly which grid lines an item starts and ends on, write
grid-column: <start-line> / <end-line>;.
Use Mediaqueries to Add Breakpoints
Always start from mobile: below 576 pixels wide, the sections appear in source order, stacked with the first at the top.
From 576 to 767 pixels wide, the layout has two columns.
Beyond 767 pixels wide, it has three.
Example
Here is the whole responsive 12-column grid layout, with header, navigation, content, sidebar, ads, and footer sections.
repeat(12, [col-start] 1fr). Apply mobile-first design: stack all sections vertically by default, switch to a two-column layout at 576px, and a three-column layout at 768px. Style each section with a green border and beige background.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 12-Column Grid Layout</title>
<style>
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Mobile first */
.container > * {
border: 1px solid green;
background-color: beige;
padding: 10px;
grid-column: col-start / span 12;
}
@media (min-width: 576px) {
.sidebar {
grid-column: col-start / span 3;
grid-row: 3;
}
.ads {
grid-column: col-start / span 3;
}
.content, .footer {
grid-column: col-start 4 / span 9;
}
nav ul {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 768px) {
.nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
}
.content {
grid-column: col-start 3 / span 8;
grid-row: 2 / 4;
}
.sidebar {
grid-column: col-start 11 / span 2;
}
.ads {
grid-column: col-start 11 / span 2;
}
.footer {
grid-column: col-start / span 12;
}
nav ul {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h2>Header</h2>
</header>
<nav class="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
<main class="content">
<h2>Content</h2>
<p>This is the main content area. It spans different numbers of columns depending on the screen size.</p>
<p>On mobile, all sections stack vertically. On medium screens, content takes 9 columns. On large screens, content takes 8 columns with navigation and sidebar on either side.</p>
</main>
<aside class="sidebar">
<h3>Sidebar</h3>
<p>Sidebar content goes here.</p>
</aside>
<aside class="ads">
<h3>Ads</h3>
<p>Advertisement area.</p>
</aside>
<footer class="footer">
<p>Footer - spans all 12 columns</p>
</footer>
</div>
</body>
</html>