CSS
Precisely Place and Span Grid Items Across Multiple Tracks
Master CSS Grid's explicit placement properties like `grid-column` and `grid-row` to position elements accurately and make them span multiple columns or rows.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
grid-template-rows: repeat(3, 100px); /* 3 rows, 100px height each */
gap: 15px;
width: 100%;
max-width: 800px;
margin: 20px auto;
border: 3px solid #f1c40f;
background-color: #fcf8e3;
}
.grid-item {
background-color: #f1c40f;
color: #333;
padding: 15px;
border-radius: 5px;
font-family: sans-serif;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.item-a {
grid-column: 1 / span 2; /* Starts at line 1, spans 2 columns */
grid-row: 1;
background-color: #2ecc71;
color: white;
}
.item-b {
grid-column: 3 / 5; /* Starts at line 3, ends at line 5 (spans 2 columns) */
grid-row: 1;
background-color: #3498db;
color: white;
}
.item-c {
grid-column: 1; /* Starts at line 1, spans 1 column by default */
grid-row: 2 / span 2; /* Starts at line 2, spans 2 rows */
background-color: #e74c3c;
color: white;
}
.item-d {
grid-column: 2 / span 3; /* Starts at line 2, spans 3 columns */
grid-row: 3;
background-color: #9b59b6;
color: white;
}
/* Example usage in HTML:
<div class="grid-container">
<div class="grid-item item-a">A (Col 1-2)</div>
<div class="grid-item item-b">B (Col 3-4)</div>
<div class="grid-item item-c">C (Row 2-3)</div>
<div class="grid-item">D (Default)</div>
<div class="grid-item item-d">E (Col 2-4, Row 3)</div>
<div class="grid-item">F (Default)</div>
</div>
*/
How it works: This snippet demonstrates explicit placement and spanning of grid items. The `grid-container` defines a 4-column, 3-row grid. Individual `.grid-item`s use `grid-column` and `grid-row` properties to specify their exact position and how many tracks they should span. For example, `grid-column: 1 / span 2` places an item starting at column line 1 and makes it span two columns. Alternatively, `grid-column: 3 / 5` specifies it starts at column line 3 and ends at column line 5. This allows for precise, non-sequential arrangement of elements within the grid.