Как сделать такую верстку блоков на Grid?

Question

[Артем Кондрацкий]

Как сделать верстку

таких блоков

на css grid? С "гридами" я знаком поверхносто, поэтому пришел в тупик. Помогите, пожалуйста!

Comments

[Артем Кондрацкий]

Xdevelx, я читал про гриды, но не понял как реализовать первый и последний блок в разных местах

[html-css]

Артем Кондрацкий,

grid-column-start: 
 grid-column-end: 
 grid-row-start: 
 grid-row-end:

[Артем Кондрацкий]

Xdevelx, вот

[Артем Кондрацкий]

Xdevelx, да, до того как скинул код там было не то, что нужно. методом тыка изменил числа и все стало как надо)).
И еще один вопрос - почему после гридов есть огромный отступ для еще одного ряда?

Answer 1

[Артем Кондрацкий]

<div class="grid-container">
  <div class="grid-block"></div>
  <div class="grid-block"></div>
  <div class="grid-block"></div>
  <div class="grid-block"></div>
  <div class="grid-block"></div>
  <div class="grid-block"></div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: 250px 250px;
    grid-gap: 25px;
}
.grid-block:first-child {
    grid-column: 1/4;
}
.grid-block:last-child {
    grid-column: 3/6;
}

Answer 2

[html-css]

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Answer 3

[profesor08]

Только ни в коем случае не задумывайся, что тут происходит.

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
}

.grid div:nth-child(1), .grid div:nth-child(6) {
  grid-column: span 3;
}