CSS Grid фиксированной высоты и переменной ширины

Question

Я пытаюсь сделать галерею изображений с помощью CSS Grid. Мне нужно что-то вроде этого:

Но все, чего можно достичь, это JSFiddle .

Проблема в том, что DIV занимают все оставшееся пространство, а я этого не хочу.

#gallery {
  background: #cfc;
  padding: 32px;
  display: grid;
  grid-auto-rows: 350px;
  grid-template-columns: repeat(auto-fit, auto);
  grid-gap: 10px;
}

.cell {
  background: #fcc;
}

.cell>img {
  height: 100%;
}

<div id="gallery">
  <div class="cell">
    <img src="http://via.placeholder.com/350x500" />
  </div>
  <div class="cell">
    <img src="http://via.placeholder.com/250x150" />
  </div>
  <div class="cell">
    <img src="http://via.placeholder.com/150x150" />
  </div>
  <div class="cell">
    <img src="http://via.placeholder.com/370x150" />
  </div>
</div>

Answer 1

Чистое решение CSS можно найти в этом jsfiddle

HTML

<div class="wrap">
    <div class="flex-c">
        <div class="flex-i big"></div>
        <div class="flex-i red"></div>
        <div class="flex-i big green"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
        <div class="flex-i green"></div>
        <div class="flex-i red"></div>
        <div class="flex-i blue"></div>
    </div>
</div>

CSS

.flex-c:after {
    content: '';
    display: table;
    clear: both;
}
.flex-i.red { background-color: red; }
.flex-i.blue {background-color: blue; }
.flex-i.green {background-color: green;}
.flex-i {
    transform: rotate(90deg) scaleY(-1);
    height: 100px;
    width: 100px;
    background-color: gray;
    margin: 0 10px 10px 0;
    float: left;
}
.flex-i:after,
.flex-i.big:before {
    content: '';
    height: 100px;
    width: 100px;
    left: 110px;
    top: 0;
    position: absolute;
    background-color: pink;
}

.flex-i.big:after {
    left: 220px;
}
.flex-i.big:before {
    left: 220px;
    bottom: 0;
    top: auto;
}

.big {
    width: 210px;
    height: 210px;
}

---

Дополнительно

Возможно, вы сможете воспользоваться библиотекой, такой как Макет кладки изотопов JS

Он помогает вам создать стиль макета, который вы показали.

Вот рабочий пример.

HTML

<div id="container">
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item w2 h2"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h2"></div>
</div>

CSS

#container {
    border: 1px solid;
    padding: 7px;
}

.item {
    width: 60px;
    height: 60px;
    float: left;
    margin: 3px;
    background: #CCC;
}

.item.w2 {
    width: 130px;
}

.item.h2 {
    height: 130px;
}

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

$( function() {
    var $container = $('#container').masonry({
        itemSelector: '.item',
        columnWidth: 70
    });
});

Просмотреть jsFiddle здесь