• CSS Properties
  • grid-column
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
    .grid-container {
6
        display: grid;
7
        grid-template-columns: auto auto auto auto;
8
        grid-gap: 12px;
9
        background-color: #00ab55;
10
        padding: 12px;
11
    }
12
    .grid-container > div {
13
        background-color: rgba(255, 255, 255, 0.8);
14
        text-align: center;
15
        padding: 12px 0;
16
    }
17
    .box1 {
18
        grid-column: 1 / span 2;
19
    }
20
</style>
21
</head>
22
<body>
23
​
24
<h1>The grid-column Property</h1>
25
​
26
<div class="grid-container">
27
    <div class="box1">1</div>
28
    <div class="box2">2</div>
29
    <div class="box3">3</div>
30
    <div class="box4">4</div>
31
    <div class="box5">5</div>
32
    <div class="box6">6</div>
33
    <div class="box7">7</div>
34
</div>
35
​
36
</body>
37
</html>