CSS
Spanning Multiple Columns or Rows in CSS Grid
Control the exact placement and size of grid items by making them span multiple columns or rows using `grid-column` and `grid-row` properties. Essential for dynamic grid designs.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: auto auto auto; /* 3 rows, content-sized */
gap: 10px;
padding: 20px;
border: 1px solid #ccc;
}
.grid-item {
background-color: #e0e0e0;
padding: 15px;
text-align: center;
border: 1px solid #ddd;
}
.item-span-2-cols {
grid-column: span 2; /* Span 2 columns */
background-color: lightgoldenrodyellow;
}
.item-span-3-cols {
grid-column: 1 / span 3; /* Start at line 1, span 3 columns */
background-color: lightcoral;
}
.item-span-2-rows {
grid-row: span 2; /* Span 2 rows */
background-color: lightgreen;
}
How it works: This snippet showcases how to make individual items span multiple columns or rows within a CSS Grid layout. By using `grid-column: span N` or `grid-row: span N`, an item will occupy N grid tracks, allowing it to take up more space horizontally or vertically. You can also specify a starting line, for example, `grid-column: 1 / span 3`, to control both position and span. This powerful feature allows for creating complex and non-uniform grid structures where certain content blocks require more space.