Creating a Grid

We start with the container that has no style:

.grid1{

}
1
2
3
4
5
6
7
8
9
We add "display:grid"

.grid2{
	display:grid;
}

But it won't change the appearance.
1
2
3
4
5
6
7
8
9
We add "grid-template-columns:repeat(4, 1fr);"
(Using fr)

.grid3{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
}

Now we got 4 columns.
1
2
3
4
5
6
7
8
9
Let's add a gap, "gap:10px;":

.grid4{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:10px;
}
1
2
3
4
5
6
7
8
9
Add "grid-template-rows:100px 50px;"

.grid5{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:10px;
	grid-template-rows:100px 50px;
}

It will set the height of the first and second row to 100px and 50px respectively.
1
2
3
4
5
6
7
8
9
To set all 3 rows to 100px, use "grid-auto-rows:100px;" instead.

.grid6{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:10px;
	grid-auto-rows:100px;
}
1
2
3
4
5
6
7
8
9
Add "grid-column-start:1;" to item1.

.item1{
	grid-column-start:1;
}

Nothing changes.
1
2
3
4
5
6
7
8
9
How about "grid-column-start:1;grid-column-end:3;"?

.item1{
	grid-column-start:1;
	grid-column-end:3;
}

Now the first item spans column1 and column2.
1
2
3
4
5
6
7
8
9
How about "grid-column-start:span 3;"?

.item1{
	grid-column-start:span 3;
}

The first item spans column1 to column3.
1
2
3
4
5
6
7
8
9
How about "grid-row-start:span 2;"?

.item1{
	grid-row-start:span 2;
}

The first item spans row1 to row2.
1
2
3
4
5
6
7
8
9
How about this?

.item2{
	grid-column-start:span 2;
	grid-row-start:span 2;
}
1
2
3
4
5
6
7
8
9
How about this?

.item3{
	grid-column-start:1;
	grid-column-end:3;
	grid-row-start:1;
	grid-row-end:3;
}
1
2
3
4
5
6
7
8
9
How about this?

.grid13 .item3{
	grid-column-start:1;
	grid-column-end:3;
	grid-row-start:1;
	grid-row-end:3;
}
.grid13 .item7{
	grid-column-start:2;
	grid-column-end:4;
	grid-row-start:2;
	grid-row-end:4;
}

grid-xxxxx-start/end properties put items by absolute address.
overwrapping is OK.
Any other items will fill blank slots.
1
2
3
4
5
6
7
8
9
This is an alternative way to draw the previous example.

.grid14 .item3{
	grid-column:1/3;
	grid-row:1/3;
}
.grid14 .item7{
	grid-column:2/4;
	grid-row:2/4;
}
1
2
3
4
5
6
7
8
9