CSS
Advanced Grid Layout with Named Grid Lines for Precise Positioning
Create flexible and readable CSS Grid layouts by defining named grid lines, enabling precise item placement and easier maintenance for complex designs.
.grid-container {
display: grid;
/* Define named lines for rows and columns */
grid-template-columns: [sidebar-start] 250px [sidebar-end content-start] 1fr [content-end];
grid-template-rows: [header-start] auto [header-end main-start] 1fr [main-end footer-start] auto [footer-end];
height: 100vh;
gap: 10px;
border: 1px solid #000;
}
.header {
grid-column: sidebar-start / content-end; /* Spans all columns */
grid-row: header-start / header-end;
background-color: #8bc34a;
padding: 15px;
}
.sidebar {
grid-column: sidebar-start / sidebar-end;
grid-row: main-start / main-end;
background-color: #a5d6a7;
padding: 15px;
}
.main-content {
grid-column: content-start / content-end;
grid-row: main-start / main-end;
background-color: #c8e6c9;
padding: 15px;
}
.footer {
grid-column: sidebar-start / content-end; /* Spans all columns */
grid-row: footer-start / footer-end;
background-color: #8bc34a;
padding: 15px;
}
How it works: Named grid lines offer a powerful and flexible way to define and manage complex grid layouts, particularly useful when `grid-template-areas` might become unwieldy for intricate designs or overlapping elements. By giving descriptive names to grid lines (e.g., `[sidebar-start]`), you can position grid items using these names (e.g., `grid-column: sidebar-start / sidebar-end`), enhancing readability and making layout adjustments more intuitive than relying solely on numerical line indices.