Grid lays out in two directions at once. You describe the tracks, then place things into them.
grid-template-columns defines the columns, grid-template-rows the rows. The fr unit is grid's own: it takes a share of whatever space is left, so 1fr 2fr splits the free room one part to two.
The lines between and around tracks are numbered from 1. Four columns therefore have five lines. grid-column: 3 means "start at line 3" and, because no end is given, "take one track" — the third column.
When you want more than one track, name the end line or say how many: grid-column: 2 / 4 and grid-column: 2 / span 2 place the same item.
grid-row works identically on the other axis. Give an item both and you have placed it exactly, regardless of the order it appears in the markup — the thing flexbox cannot do.
.board {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.tile {
grid-column: 2 / span 2;
grid-row: 3;
}