Build a simple, responsive search homepage with CSS Grid’s named areas. The result is an educational approximation—not an official Google design or canonical clone—and the focus is the layout map, not pixel-perfect branding.
What you’ll build
This exercise uses four page regions: a header, a central search area, a footer, and deliberate open space. Grid areas make the overall composition legible in the CSS: the names form a map of where each region belongs.
As an Amazon Associate I earn from qualifying purchases.
CSS Grid is a two-dimensional layout system, useful for arranging page regions as well as smaller interface elements. Named areas are one option; line-based placement and automatic placement are alternatives. MDN describes grid-template-areas as specifying named grid areas, establishing the grid’s cells and assigning them names.
How to use grid-template-areas
1. Write a small semantic structure
Include only the elements this approximation needs. The header and footer can hold simple text or links; the search region contains a heading, input, and buttons. The example intentionally omits Google logos, exact spacing, and other brand-specific details.
#1 Best Overall
<div class="home">
<header class="header">About Store</header>
<main class="search">
<h1>Search</h1>
<input aria-label="Search" type="search">
<div class="actions">
<button>Search</button>
<button>I'm Feeling Lucky</button>
</div>
</main>
<footer class="footer">Privacy Terms Settings</footer>
</div>2. Name each grid item and draw the map
Assign each child a name with grid-area. On the parent, write those names as quoted rows in grid-template-areas. A repeated name occupies multiple cells, so the central search region spans the middle columns. A period marks a cell that should remain empty.
.home {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr minmax(0, 2fr) 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
". search ."
"footer footer footer";
gap: 1rem;
padding: 1rem;
}
.header { grid-area: header; }
.search {
grid-area: search;
align-self: center;
justify-self: center;
text-align: center;
}
.footer { grid-area: footer; }
.search input {
display: block;
width: min(100%, 32rem);
margin: 1rem auto;
}
.actions {
display: flex;
justify-content: center;
gap: 0.5rem;
}The first row places the header across all three columns. The middle row reserves the outer cells as whitespace and puts search in the center. The final row stretches the footer across the grid. The grid map controls the major regions; ordinary layout rules such as Flexbox can still arrange the buttons inside a region.
Rank #2
3. Check the map before debugging styling
- Every quoted row must contain the same number of cells. Here each row has three.
- Every named area must occupy a contiguous rectangle. The three header cells and three footer cells each form one; the search occupies one.
- Repeated names must be adjacent in a rectangular shape. A name arranged in an L shape cannot describe one grid area; revise the design or place items another way.
- Use a period for an intentionally empty cell, not as a placeholder name.
If the template is invalid—for example, rows have different cell counts or a named area is nonrectangular—the browser ignores the invalid grid-template-areas declaration. These checks are often more useful than tweaking margins when a named region appears misplaced.
Recommended Free Tools
Make the homepage adapt to a narrow screen
At a narrow width, the side whitespace columns are no longer useful. Redefine both the tracks and the area map in a media query; the same child elements keep their area names while the parent assigns those regions differently.
Rank #3
@media (max-width: 40rem) {
.home {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header"
"search"
"footer";
}
.header,
.footer {
text-align: center;
}
}The 40rem threshold is a choice for this example, not a universal CSS Grid breakpoint. Choose a breakpoint by checking when this design’s content or spacing needs to change. MDN’s responsive Grid examples demonstrate the same general approach: revise the template at a media query to reorganize named areas.
When named areas are—and aren’t—the clearest choice
| Placement approach | Useful when | How it differs |
|---|---|---|
grid-template-areas |
The page is easiest to understand as a named visual map. | Names label regions in a row-by-row template; repeated names create rectangular spans. |
Line-based placement, such as grid-row and grid-column |
You need to specify explicit grid lines or spans. | Items are positioned by coordinates rather than a named map. |
| Automatic placement | Items can flow into available grid cells without individually specified positions. | The browser places items according to the grid’s auto-placement behavior. |
These methods can be used where they fit best; named areas are not required for every item. For this page-level composition, the map is useful because the relationship between header, search, whitespace, and footer is visible at a glance.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Browser support
MDN marks grid-template-areas as widely available and reports broad browser availability since October 2017. That date describes compatibility, not a usage statistic.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
