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

Question

[Name_23]

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

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;
}

Comments

[Сергей delphinpro]

Элементарная сетка 6х3. В чем проблема-то?

display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(6, 1fr);

[Ankhena]

На картинке грид в 6 столбцов и 3 строки.

Варианта 2:
1. Делаете именованные области.
Типа так: https://jsfiddle.net/59jxqu72/

2. Указываете блокам начальные и конечные линии по вертикали и горизонтали.
Так https://jsfiddle.net/yzL6d3ks/

[Name_23]

Сергей delphinpro, да знаю, что элементарная. Я только начинал учить grid , поэтому не смог.

Answer 1

[altentaller]

Вот пример по вашему макету без именованных областей, будет проще разобраться если только начинаете)
https://codepen.io/altentaller/pen/zYEZOEb

Comments

[Name_23]

Спасибо