Html CSS网格固定高度和可变宽度

我正在尝试使用CSS网格创建一个图像库。我需要这样的东西：

但我们所能做到的就是这一点

问题是，div会占用所有剩余的空间，我不希望这样

#图库{
背景：#cfc；
填充：32px；
显示：网格；
网格自动行：350px；
网格样板列：重复（自动拟合、自动）；
栅隙：10px；
}
.细胞{
背景：#fcc；
}
.cell>img{
身高：100%；
}

---

纯CSS解决方案可以在这个

HTML

---

另外

您可能会从使用诸如

它可以帮助您生成所显示的布局样式

下面是一个工作示例

HTML

JS-注意，您必须将砌体应用于父元素，在本例中，父元素是容器的id

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

---

查看

500px tallimage是否应缩小到150px高？因为网格是为单元格而不是图像定义的为什么不使用flexbox？网格应具有5列。有些单元格跨越两列Sok，所以我放弃了这个想法，因为它需要很多技巧或库才能实现。这并不能回答这个问题。一旦你有足够的钱，你将能够；相反@SamvelAleqsanyan本文更新了一个工作示例。更多配置选项可在提供的ISOTOEJS链接上找到。@schmitty890 OP正在寻找CSS网格解决方案，而不是ISOTOJSsolution@MikeDiglio除了EJS解决方案外，还添加了纯css解决方案。ISOTOEJS是一个专门为开发人员处理此功能的库，因此建议使用ISOTOEJS。@SamvelAleqsanyan我将直接回答问题，而不是提供不需要提问者澄清的答案，因为我在js/html/css/jquery领域有丰富的经验。欢迎阅读同位素.js库中的文档，因为它提供了一个javascript库来解决这个特定问题。否则，如果库不能在应用程序中使用，我就提供了一个纯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;
}

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

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

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