Named Lines and Named Grid Areas
Name grid lines and areas for more readable and maintainable grid placement.
Naming Grid Lines
Grid lines can be given names in square brackets within grid-template-columns and grid-template-rows. Named lines make placement code more readable than raw numbers.
.layout {
display: grid;
grid-template-columns:
[start sidebar-start] 200px
[sidebar-end main-start] 1fr
[main-end end];
}Placing Items with Named Lines
Use named lines in grid-column and grid-row for readable placement:
.sidebar {
grid-column: sidebar-start / sidebar-end;
}
.main {
grid-column: main-start / main-end;
}All lessons in this course
- Named Lines and Named Grid Areas
- Auto-fit and Auto-fill with minmax
- Implicit Grid and Grid-Auto-Flow
- Subgrid for Aligned Nested Content