CSS
Complex Magazine Layout with Named CSS Grid Lines
Design intricate, magazine-style layouts using CSS Grid by defining and referencing named grid lines for precise item placement and advanced control.
.magazine-layout {
display: grid;
grid-template-columns: [main-start] 1fr [col1-end] 20px [col2-start] 2fr [main-end];
grid-template-rows: [header-start] auto [header-end text-start] 1fr [text-end footer-start] auto [footer-end];
gap: 15px;
width: 800px;
border: 1px solid #ccc;
padding: 20px;
}
.header {
grid-column: main-start / main-end;
grid-row: header-start / header-end;
background-color: #f8f8f8;
padding: 10px;
text-align: center;
font-size: 1.5em;
font-weight: bold;
}
.main-article {
grid-column: main-start / col1-end;
grid-row: text-start / text-end;
background-color: #e0e0e0;
padding: 15px;
line-height: 1.6;
}
.sidebar {
grid-column: col2-start / main-end;
grid-row: text-start / text-end;
background-color: #d0d0d0;
padding: 15px;
font-style: italic;
}
.footer {
grid-column: main-start / main-end;
grid-row: footer-start / footer-end;
background-color: #f8f8f8;
padding: 10px;
text-align: center;
font-size: 0.9em;
}
How it works: This snippet demonstrates creating a complex layout using named CSS Grid lines. Instead of numerical indices, grid lines are given descriptive names (e.g., `main-start`, `header-end`). This approach makes the grid structure more readable and maintainable, especially for intricate designs like magazine layouts or dashboards, by allowing items to be placed precisely relative to these named lines, improving clarity and collaboration.