CSS

CSS - Grid

there is a sample of some CSS Grid representing a 6 column grid.

1
2
3
4
5
6
7
8
9
10
11
12
13
.the6ColGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
    gap: 8px;
}  

.the6ColGridUnreconciled {
    grid-column: 1 / span 3;
}

.the6ColGridReconciled {
    grid-column: 4 / span 3;
}

In this case, the first statement is the grid container defining a 6 column grid. The second and third statements are special grid items. The first is the first 3 columns, the second is the last 3 columns.

Here is an of how this is used.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="the6ColGrid">
    <div>first row, column 1</div>
    <div>first row, column 2</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- row 2 -->
    <div></div>
    <div></div>
    <div></div>
    <div>second row, column 4</div>
    <div></div>
    <div></div>
    <!-- row 3 -->
    <div class="the6ColGridUnreconciled" >
    Third row, columns 1-3
    </div>
    
    <div class="the6ColGridReconciled" >
    Third row, columns 4-6
    </div>
</div>

So in summary, the grid is defined in the CSS, and then the grid items are defined in the next container tags defined under the grid tag. Each container tag

is a column. You are expected to provide a container for each column.