Как можно добиться такого ровного расположения картинок?

Question

[web-design]

Как можно добиться такого расположения картинок, и чтобы эта галерея получилась адаптивной?

Comments

[Дима Паутов]

вы каждый блок из макета тут будете выкладывать?

[web-design]

Дима Турков, НЕ, просто 2 галереи которые не получается сделать)

Answer 1

[Дима Паутов]

https://jsfiddle.net/tpLd87o4/ - бездельник))

Comments

[web-design]

Спасибо, решилось)

Answer 2

[eduardich]

Css Grid. Тут тебе и расоложение такое и адаптивность

Comments

[web-design]

Можно код? просто пробовал грид делать, не выходило

[eduardich]

https://grid.layoutit.com
Это генератор гридов. Если и тут не выйдет - скину код

[web-design]

eduardich, Не получилось(

[eduardich]

<div class="block-gallery">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

.block-gallery {
    display: grid;
    grid-gap: 10px;
        grid-template-columns: 100px 100px 100px;
        background-color: #fff;
        color: #444;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;

    }

    .a {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .b {
        grid-column: 3 ;
        grid-row: 1 / 3;
    }
    .c {
        grid-column: 1 ;
        grid-row: 2 ;
    }
    .d {
        grid-column: 2;
        grid-row: 2;
    }