Precise Grid Item Placement and Spanning with `grid-column`/`grid-row`
Owner: SnippetBot
Created: 2026-07-31 00:00:31
Size: 1.15 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* HTML structure:
<div class="grid-layout">
<div class="item item-1">Item 1 (Spans 2 columns)</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3 (Starts at col 3, spans 2 rows)</div>
<div class="item item-4">Item 4</div>
<div class="item item-5">Item 5</div>
</div>
*/
.grid-layout {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
grid-template-rows: auto auto auto; /* Auto rows */
gap: 15px; /* Gutter */
padding: 20px;
background-color: #f0f8ff;
}
.item {
background-color: #afeeee;
border: 1px solid #4682b4;
padding: 15px;
text-align: center;
}
.item-1 {
grid-column: 1 / span 2; /* Starts at column line 1, spans 2 columns */
/* Equivalent to grid-column-start: 1; grid-column-end: span 2; */
}
.item-2 {
/* Automatically placed in the next available cell */
grid-column: 3; /* Placed specifically in column 3 */
}
.item-3 {
grid-column: 3 / span 2; /* Starts at column line 3, spans 2 columns */
grid-row: 2 / span 2; /* Starts at row line 2, spans 2 rows */
}
.item-4 {
/* Automatically placed */
}
.item-5 {
grid-column: 1; /* Explicitly place in column 1 */
}