HTML and CSS Grid Layout
HTML & CSS: Grid Layout
CSS Grid unlocks two-dimensional layout.
Define rows, columns, and regions to design dashboards, landing pages, and complex responsive structures with minimal markup.
Grid container essentials
- Enable Grid with
display: grid;orinline-grid;. - Use
grid-template-columnsandgrid-template-rowsto declare tracks. gap(orcolumn-gap/row-gap) handles spacing between tracks.
Note: A track is one column or row.
Imagine drawing a table with lines-Grid lets you define those lines in CSS.
If you want to read more about CSS Grid or get an in-depth understanding, go to CSS Grid in the CSS tutorial.
Track sizing strategies
- Fixed tracks:
grid-template-columns: 300px 1fr 1fr;. - Fractional units (
fr) distribute remaining space. - Responsive tracks:
repeat(auto-fit, minmax(220px, 1fr)).
Note: fr stands for “fraction”; it shares leftover space.
minmax() sets a minimum and maximum size so items can stretch.
Example: Marketing Layout
This example uses a 12-column grid for the hero section (split copy and visual) and an auto-fit feature grid below.
It demonstrates responsive tracks and spacing.
Hero with feature grid
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<section class="hero">
<div class="copy">
<h1>Design systems that scale</h1>
<p>Unify design and engineering with a shared language of tokens, components, and guidelines.</p>
<a class="cta" href="#">Get started</a>
</div>
<div class="visual">
<h2>Release highlights</h2>
<ul>
<li>Theme builder with live preview</li>
<li>Component usage analytics</li>
<li>Accessibility score tracking</li>
</ul>
</div>
</section>
<section class="features">
<article>
<h3>Token management</h3>
<p>Promote core spacing, color, and typography values across apps.</p>
</article>
<article>
<h3>Component lifecycles</h3>
<p>Track usage, adoption, and deprecation with analytics dashboards.</p>
</article>
<article>
<h3>Design reviews</h3>
<p>Automate review workflows and close the loop between design and code.</p>
</article>
</section>
</body>
</html>
body {
font-family: "Inter", sans-serif;
margin: 0;
color: #0f172a;
}
.hero {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
padding: 88px clamp(24px, 6vw, 80px);
background: linear-gradient(120deg, #2563eb 0%, #7c3aed 50%, #0f172a 100%);
color: #fff;
}
.hero .copy {
grid-column: span 6;
max-width: 480px;
}
.hero .visual {
grid-column: span 6;
background: rgba(255,255,255,0.09);
border-radius: 24px;
padding: 40px;
}
.features {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
padding: clamp(32px, 5vw, 80px);
}
.features article {
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 28px;
background: #fff;
}
@media (max-width: 900px) {
.hero .copy,
.hero .visual {
grid-column: 1 / -1;
}
}
The hero uses grid-template-columns: repeat(12, 1fr) and spans 6 columns per side on large screens, collapsing to full width via a media query.
The features use repeat(auto-fit, minmax(220px, 1fr)) to adapt card count.
Placing grid items
- Auto-placement fills tracks in source order by default.
- Explicit placement:
grid-column: 1 / 7;,grid-row: 2 / span 2;. - Use named areas:
grid-template-areasplusgrid-areaon items.
Note: “Auto” lets the browser place items automatically.
Explicit placement gives exact coordinates so items land where you want.
Alignment controls
justify-itemsandalign-itemsalign content inside tracks.justify-contentandalign-contentdistribute overall grid within the container.place-itemsandplace-contentcombine both axes.
Responsive patterns
- Use
auto-fit/auto-fillwithminmax()for fluid cards. - Combine media queries with track adjustments for complex breakpoints.
- Switch to stacked layout by changing
grid-template-areason small screens.
Note: auto-fit collapses empty tracks, while auto-fill preserves them.
Both help grids adapt to screen size.
