Grid Placement
📌 Covered in this chapter:
grid-column · grid-row · Grid Lines · grid-area · Named Areas · Spanning · place-items · place-content · justify-items · align-items · Auto Placement
Welcome to Chapter 25: Grid Placement — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Named Grid Areas — Page Layout
CSS — App Layout▶ Try in Editor
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 0;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }2grid-column, grid-row & Spanning
CSS
.hero {
grid-column: 1 / -1; /* span all columns */
}
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Line numbers: grid-column: 2 / 4; */place-items / place-content — align and justify shorthand for grid container.