CSS
CSS Grid: Spanning and Aligning Content in Irregular Cells
Master complex grid layouts by making items span multiple columns and rows, then precisely aligning their content within these irregular grid areas.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
grid-template-rows: repeat(3, 100px); /* 3 fixed-height rows */
gap: 10px;
padding: 20px;
max-width: 900px;
margin: 30px auto;
border: 1px solid #ccc;
box-sizing: border-box;
}
.grid-item {
background-color: #8c72cf;
color: white;
padding: 15px;
border-radius: 5px;
display: flex; /* Use flex for content alignment inside grid item */
justify-content: center;
align-items: center;
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
/* Item 1: Spans 2 columns, 1 row */
.item-1 {
grid-column: span 2;
background-color: #6a1b9a;
}
/* Item 2: Spans 1 column, 2 rows */
.item-2 {
grid-row: span 2;
background-color: #4a148c;
}
/* Item 3: Spans 3 columns, 1 row and aligns content to the start */
.item-3 {
grid-column: span 3;
grid-row: 2 / 3; /* Explicitly place it in the second row */
background-color: #ad8ede;
justify-content: flex-start; /* Align content to the start */
align-items: flex-start;
}
/* Item 4: Spans 2 columns, 2 rows and aligns content to the end */
.item-4 {
grid-column: 3 / span 2; /* Starts at col 3, spans 2 */
grid-row: span 2;
background-color: #ba68c8;
justify-content: flex-end; /* Align content to the end */
align-items: flex-end;
font-size: 0.9em;
}
/* Other items for demonstration */
.item-x {
background-color: #cf93d3;
}
body { margin: 0; font-family: sans-serif; background-color: #f4f4f4; }
/* HTML Structure */
/*
<div class="grid-container">
<div class="grid-item item-1">Item 1 (2 cols)</div>
<div class="grid-item item-x">Item X</div>
<div class="grid-item item-2">Item 2 (2 rows)</div>
<div class="grid-item item-3">Item 3 (3 cols, start align)</div>
<div class="grid-item item-4">Item 4 (2 cols, 2 rows, end align)</div>
<div class="grid-item item-x">Item Y</div>
<div class="grid-item item-x">Item Z</div>
</div>
*/
How it works: This example demonstrates how to create complex, asymmetric layouts using CSS Grid by making items span multiple grid tracks and precisely aligning their content. The `.grid-container` defines a 4-column, 3-row grid. Individual `.grid-item` elements then use `grid-column` and `grid-row` properties with the `span` keyword (e.g., `span 2`) to occupy more than one track. This allows creating larger blocks. Furthermore, within each grid item, Flexbox is used (`display: flex`, `justify-content`, `align-items`) to perfectly center, start, or end-align its internal content, providing granular control over both the item's placement in the grid and its internal content's positioning. Explicit line numbers (e.g., `grid-row: 2 / 3;`) are also shown for precise placement.