Проблема с вёрсткой grid?

Question

Вот блок, который нужно сверстать. Я только недавно начал его изучать, так что не силён в нём. В Интернете искал похожие примеры, не нашёл. Помощь нужна только с расположением фото, стрелку и надпись верстать не нужно.

HTML

<header class="header">
    <div class="container">
        <div class="header-gallery">
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
            <div class="gallery__div-img">
                <img src="img/head_2.png" alt="" class="gallery__img">
            </div>
        </div>
    </div>
</header>

CSS

.header {
    background: url("../img/bg_1.jpg") center no-repeat;
    background-size: cover;
    display: block;
    width: 100%;
    height: auto;
}

.container {
    max-width: 1705px;
    margin: 0 auto;
    width: 100%;
}

.header-gallery {
    display: grid;
     grid-template-columns: repeat(auto-fit, minmax(286px, 1fr));
      grid-auto-flow: dense;
    // grid-template-areas:
}

.gallery__div-img {
    padding: 10px;
}

Answer 1

Если Вам не принципиально, что количество блоков может динамически меняться, то можно дать каждому блоку имя и выстроить по шаблону так:

.container {
  max-width: 1705px;
  margin: 0 auto;
  width: 100%;
}

.header-gallery {
  width: calc(100px * 6);
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  ". . . div1 div2 ."
  "div3 div4 div5 div6 div7 div8"
  ". div9 div10 . . div11";
}

.gallery__div-img {
  padding: 10px;
  width: 100px;
  height: 100px;
}

.gallery__div-img:nth-child(1) {
  grid-area: div1;
  background: #111;
}

.gallery__div-img:nth-child(2) {
  grid-area: div2;
  background: #222;
}

.gallery__div-img:nth-child(3) {
  grid-area: div3;
  background: #333;
}

.gallery__div-img:nth-child(4) {
  grid-area: div4;
  background: #444;
}

.gallery__div-img:nth-child(5) {
  grid-area: div5;
  background: #555;
}

.gallery__div-img:nth-child(6) {
  grid-area: div6;
  background: #666;
}

.gallery__div-img:nth-child(7) {
  grid-area: div7;
  background: #777;
}

.gallery__div-img:nth-child(8) {
  grid-area: div8;
  background: #888;
}

.gallery__div-img:nth-child(9) {
  grid-area: div9;
  background: #999;
}

.gallery__div-img:nth-child(10) {
  grid-area: div10;
  background: #f00;
}

.gallery__div-img:nth-child(11) {
  grid-area: div11;
  background: #ff0;
}

<header class="header">
  <div class="container">
    <div class="header-gallery">
      <div class="gallery__div-img">1</div>
      <div class="gallery__div-img">2</div>
      <div class="gallery__div-img">3</div>
      <div class="gallery__div-img">4</div>
      <div class="gallery__div-img">5</div>
      <div class="gallery__div-img">6</div>
      <div class="gallery__div-img">7</div>
      <div class="gallery__div-img">8</div>
      <div class="gallery__div-img">9</div>
      <div class="gallery__div-img">10</div>
      <div class="gallery__div-img">11</div>
    </div>
  </div>
</header>

БЛОГ НА HUSL

Проблема с вёрсткой grid?

Ответы (1 шт):