CSS
Grid Item Spanning Multiple Rows or Columns
Master how to make individual CSS Grid items span across multiple rows or columns, enabling flexible and powerful custom layouts for unique content arrangements.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: repeat(3, 100px); /* 3 rows, 100px height each */
gap: 10px;
padding: 10px;
background-color: #e0e0e0;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
padding: 20px;
}
/* Example of spanning */
.item-span-column-2 {
grid-column: span 2; /* Spans 2 columns */
}
.item-span-row-3 {
grid-row: span 3; /* Spans 3 rows */
}
.item-span-both {
grid-column: span 2;
grid-row: span 2;
}
How it works: This snippet shows how to make grid items span multiple rows or columns. The parent `grid-container` defines a 3x3 grid. Individual `.grid-item` elements can then use `grid-column: span N` or `grid-row: span N` to occupy N tracks along the respective axis. This is powerful for creating non-uniform layouts where certain content blocks need more space than others.