In CSS Grid, have a flexible method outside numerical indexes for positioning items using named grid lines and grid areas. Both techniques improve the clarity and maintainability of your layout code.
Named Grid Lines
Grid Lines and tracks are separated by horizontal and vertical grid lines. You can name these lines instead of using their usual number index (beginning from 1). Complex grids with difficult line numbers benefit from this.
Using the grid container’s grid-template-columns and grid-template-rows parameters, you name grid lines. Square brackets [] enclose names between track sizes.
One grid line might have many names. Spaces separate these names in square brackets. This is handy for lines like [sidebar-end content-start], which finish one section and start another. Using explicit labels like sidebar-end and content-start for the same line separates the name from the structural role.
Once you have named grid lines, you can use their names in item placement attributes such as grid-column-start, end, and row-start, end, instead of numbers. The shorthand properties grid—column and grid—row can employ named lines. For example, a header can run from sidebar-start to content-end, offering more information than numerical ranges.
A particular protocol exists for named grid lines. Names following the pattern ‘area-name-start’ and ‘area-name-end’ for both horizontal and vertical lines create a grid area named ‘area-name’ at their intersection points. Use the grid-area property with the area name to place objects in this implicitly specified region.
Example: Named Grid Lines
The layout is basic, featuring a sidebar and content area, with a header spanning both.
<div class="container">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
<footer>Footer</footer>
</div>
.container {
display: grid;
/* Define columns and name lines:
Line 1: sidebar-start
Line 2: sidebar-end and content-start
Line 3: content-end */
grid-template-columns: [sidebar-start] 1fr [sidebar-end content-start] 3fr [content-end]; /* */
/* Define rows and name lines:
Line 1: header-start
Line 2: header-end and content-start (for main content)
Line 3: content-end (for main content) */
grid-template-rows: [header-start] 100px [header-end content-start] 1fr [content-end]; /* - Note: This example assumes a simple 2-row content area for illustration */
gap: 1em; /* Optional: Add space between tracks */
}
header {
/* Place header using named lines */
grid-column-start: sidebar-start; /* */
/* Span to the named content-end line */
grid-column-end: content-end; /* Based on spanning to a named gap/line */
/* Alternative shorthand: */
/* grid-column: sidebar-start / content-end; */
grid-row-start: header-start; /* */
grid-row-end: header-end; /* */
/* Alternative shorthand: */
/* grid-row: header-start / header-end; */
background-color: #f0f0f0; /* Just for visibility */
padding: 1em;
}
aside { /* Represents the sidebar */
/* Place sidebar using named lines */
grid-column-start: sidebar-start; /* */
grid-column-end: sidebar-end; /* */
/* Alternative shorthand: */
/* grid-column: sidebar-start / sidebar-end; */
grid-row-start: content-start; /* */
grid-row-end: content-end; /* */
/* Alternative shorthand: */
/* grid-row: content-start / content-end; */
background-color: #d3eaf2; /* Just for visibility */
padding: 1em;
}
main {
/* Represents the content */
/* Place main content using named lines */
grid-column-start: content-start; /* */
grid-column-end: content-end; /* */
/* Alternative shorthand: */
/* grid-column: content-start / content-end; */
grid-row-start: content-start; /* */
grid-row-end: content-end; /* */
/* Alternative shorthand: */
/* grid-row: content-start / content-end; */
background-color: #e0f7df; /* Just for visibility */
padding: 1em;
}
footer {
/* Example using implicit grid area naming if lines were named *-start and *-end */
/* If we had lines named footer-start/footer-end horizontally and vertically */
/* then grid-area: footer; could place the footer */
/* For this example, place it using named lines: spans from sidebar-start to content-end */
grid-column: sidebar-start / content-end; /* */
grid-row: content-end / span 1; /* Place after the main content area */
background-color: #f0f0f0; /* Just for visibility */
padding: 1em;
}Note: The grid-column-end: content-end; example uses the named line as the explicit end line. mentions span <name> meaning “enlarge until it encounters the grid line named “. While span content-end implies spanning to that line, the clear end line syntax grid-column-end: content-end; is more direct if the names correspond to grid line positions.
Grid Area
Grid areas are rectangular regions that span one or more grid cells. It has two horizontal and two vertical gridlines. Grid cells are the smallest horizontal-vertical intersections. An region can have one or more cells. A continuous rectangle should be formed by areas having the same name.
Most grid areas are defined using the grid container’s grid-template-areas attribute. This feature employs visual “ASCII art” syntax, representing each grid row with a quoted text. Within each string, space-separated designations identify row columns and grid areas.
A dot (.) creates an empty grid-template-areas visual definition cell. Multiple vacant regions can be called.
Grid-template-areas establish grid areas, and grid items are placed in them by setting their grid-area attribute to the name of the area. The grid-area attribute specifies row and column start and end lines depending on the chosen area.
grid-template-areas is used with grid-template-rows and grid-template-columns to specify layout row and column sizes. For fixed-size tracks, it’s needed, but not for fr units.
Using grid areas makes the CSS code very readable as it provides a visual representation of the layout structure.
Example: Grid Areas
<div class="container">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
<footer>Footer</footer>
</div>
.container {
display: grid;
/* Define the grid structure using grid-template-areas */
/* This creates a 3x2 grid (3 rows, 2 columns) visually */
grid-template-areas:
"header header" /* Header spans both columns in the first row */ /* */
"sidebar content" /* Sidebar in the first column, content in the second */ /* */
"footer footer"; /* Footer spans both columns in the third row */ /* */
/* Define the sizes for the corresponding rows and columns */
/* Matches the visual layout above */
grid-template-columns: 1fr 3fr; /* Sidebar column 1fr, Content column 3fr */ /* */
grid-template-rows: 100px 1fr 100px; /* Header 100px, Content/Sidebar 1fr, Footer 100px */ /* */
gap: 1em; /* Optional: Add space between tracks */
}
header {
/* Place the header into the 'header' grid area */
grid-area: header; /* */
background-color: #f0f0f0; /* Just for visibility */
padding: 1em;
}
aside { /* Represents the sidebar */
/* Place the aside into the 'sidebar' grid area */
grid-area: sidebar; /* */
background-color: #d3eaf2; /* Just for visibility */
padding: 1em;
}
main { /* Represents the content */
/* Place the main content into the 'content' grid area */
grid-area: content; /* */
background-color: #e0f7df; /* Just for visibility */
padding: 1em;
}
footer {
/* Place the footer into the 'footer' grid area */
grid-area: footer; /* */
background-color: #f0f0f0; /* Just for visibility */
padding: 1em;
}Both named grid lines and grid areas offer powerful ways to structure and place grid items, leading to more maintainable and understandable CSS compared to depend on numerical line indexes. The choice between them depend on the complexity of the layout and developer preference.