Define a new row in css grid - css

Question

Is there a way in css grid of saying 'after the second column, start another row'?
It seems straightforward enough defining how much height and width you want a grid cell to take up, but defining where you want cells to appear requires a lot of syntax - I feel like I'm missing something.
Like this layout:
main {
display: grid;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
}
.block {
height: 200px;
}
.block--one {
background: coral;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.block--two {
background: cornflowerblue;
grid-column-start: 2;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
}
.block--three {
background: burlywood;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.block--four {
background: lightseagreen;
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 4;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>
Shouldn't it be achievable with something like this?
main {
display: grid;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
grid-template-rows: 2fr 2fr;
grid-template-columns: 2fr 4fr 5fr 1fr;
}
.block {
height: 200px;
}
.block--one {
background: coral;
}
.block--two {
background: cornflowerblue;
}
.block--three {
background: burlywood;
}
.block--four {
background: lightseagreen;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>

Answer 1

You can simplify the code by using a shorthand property.
In your first example, you're using all long-hand properties. For example, you have this:
.block--two {
background: cornflowerblue;
grid-column-start: 2;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
}
Like with other CSS features, such as borders, margins and padding, there's a shorthand property to consolidate multiple lines of code.
In this case, there's the grid-area property, which shortens the code above to:
grid-area { 1 / 2 / 2 / 6 }
The values flow in this order:
grid-row-start
grid-column-start
grid-row-end
grid-column-end
main {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 200px;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
}
.block--one {
background: coral;
/* no need to specify placement here; default aligns to row 1, column 1 */
}
.block--two {
background: cornflowerblue;
grid-area: 1 / 2 / 2 / -1;
}
.block--three {
background: burlywood;
grid-area: 2 / 1 / 3 / 4;
}
.block--four {
background: lightseagreen;
grid-area: 2 / 4 / 3 / -1;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>
More details: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

Answer 2

A good way of defining the rows and columns can be by using grid-template-areas and grid-area which can define how many rows and columns a grid area should take up. This is especially helpful when changing the layout with #media tags, you only have to change the one attribute.
From your row and column definitions I can add each block to take up the space that I want it to.
See example for 2 rows by 4 columns for the 4 blocks.
main {
display: grid;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
grid-template-rows: 2fr 2fr;
grid-template-columns: 2fr 4fr 5fr 1fr;
grid-template-areas:
"block1 block2 block2 block2"
"block3 block3 block4 block4";
}
.block {
height: 200px;
}
.block--one {
grid-area: block1;
background: coral;
}
.block--two {
grid-area: block2;
background: cornflowerblue;
}
.block--three {
grid-area: block3;
background: burlywood;
}
.block--four {
grid-area: block4;
background: lightseagreen;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>

Answer 3

main {
display: grid;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
grid-auto-flow: row;
}
.block {
height: 200px;
}
.block--one {
background: coral;
grid-column: 1;
}
.block--two {
background: cornflowerblue;
grid-column: 2/ 6;
}
.block--three {
background: burlywood;
grid-column: 1 / 4;
}
.block--four {
background: lightseagreen;
grid-column: 4 / 6;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>
grid-auto-flow: row; Will start on new row if the element is not able to fit on the current row