CSS
Precise Item Placement with CSS Grid Lines and Areas
Learn to precisely position grid items using `grid-row`, `grid-column`, or named `grid-area` properties, enabling complex, non-sequential layouts.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
grid-template-areas:
"header header header"
"nav main aside";
width: 100%;
border: 1px solid #000;
padding: 10px;
}
.grid-container > div {
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
.item-header {
grid-area: header; /* Placed using a named area */
background-color: #f8d7da;
}
.item-nav {
grid-row: 2 / 3; /* Placed from row line 2 to 3 */
grid-column: 1 / 2; /* Placed from column line 1 to 2 */
/* Alternative: grid-area: nav; */
background-color: #d4edda;
}
.item-main {
grid-column: 2 / span 2; /* Starts at col line 2, spans 2 columns */
grid-row: 2; /* Starts and ends at row line 2 (auto span 1) */
/* Alternative: grid-area: main; */
background-color: #ffeeba;
}
/* HTML Structure Example: */
/* <div class="grid-container">
/* <div class="item-header">Header</div>
/* <div class="item-nav">Navigation</div>
/* <div class="item-main">Main Content</div>
/* <div class="item-aside">Sidebar</div>
/* </div> */
How it works: CSS Grid offers powerful ways to explicitly place items. You can use line-based placement with `grid-row` and `grid-column` (specifying start and end lines, or `span` for duration). Alternatively, `grid-template-areas` allows you to define named areas in your grid layout, and then assign items to these areas using the `grid-area` property for a more semantic and readable structure.