CSS
Create Responsive Layouts with CSS Grid Template Areas
Master CSS Grid Template Areas for defining complex and responsive page layouts with semantic naming, ideal for headers, sidebars, main content, and footers.
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr; /* Defines column widths */
grid-template-rows: auto 1fr auto; /* Defines row heights */
gap: 1em;
min-height: 100vh;
font-family: sans-serif;
border: 2px dashed #ccc;
}
.header { grid-area: header; background-color: #3f51b5; color: white; padding: 1em; text-align: center; }
.nav { grid-area: nav; background-color: #ff9800; padding: 1em; }
.main { grid-area: main; background-color: #e0e0e0; padding: 1em; }
.sidebar{ grid-area: sidebar;background-color: #4caf50; padding: 1em; }
.footer { grid-area: footer; background-color: #3f51b5; color: white; padding: 1em; text-align: center; }
How it works: This example showcases CSS Grid's powerful `grid-template-areas` property to define a named layout structure. Each string in `grid-template-areas` represents a row, and the words inside define the areas that child elements will occupy. `grid-template-columns` and `grid-template-rows` define the size of these tracks. Child elements are then assigned to these areas using the `grid-area` property, making complex layouts highly readable and easy to adapt responsively with media queries.