CSS
Precise Grid Item Placement with Named Lines
Master explicit placement of grid items using custom named grid lines (e.g., `grid-column: content-start / content-end`), offering flexible layout control beyond template areas.
.grid-container {
display: grid;
grid-template-columns: [col-start] 1fr [col-middle] 2fr [col-end];
grid-template-rows: [row-start] auto [row-content-start] 1fr [row-content-end] auto [row-end];
gap: 10px;
width: 90%;
margin: 20px auto;
height: 400px;
border: 2px solid #0056b3;
padding: 15px;
}
.header {
grid-column: col-start / col-end;
grid-row: row-start;
background-color: #007bff;
color: white;
padding: 10px;
text-align: center;
}
.sidebar {
grid-column: col-start;
grid-row: row-content-start / row-content-end;
background-color: #6c757d;
color: white;
padding: 10px;
}
.main-area {
grid-column: col-middle / col-end;
grid-row: row-content-start / row-content-end;
background-color: #f8f9fa;
padding: 10px;
border: 1px solid #dee2e6;
}
.footer {
grid-column: col-start / col-end;
grid-row: row-end;
background-color: #343a40;
color: white;
padding: 10px;
text-align: center;
}
How it works: CSS Grid allows you to name specific grid lines during their definition (e.g., `[col-start]`). You can then use these named lines with properties like `grid-column` and `grid-row` to precisely place grid items. This method offers fine-grained control for complex layouts, often providing more flexibility than `grid-template-areas` when items need to span non-contiguous lines or when line-based precision is preferred.