小编pau*_*cxz的帖子

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

我正在尝试使用 CSS 网格制作图像库。我需要这样的东西:

这

但所有能实现的就是这个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%;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

html css css-grid

10
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

css-grid ×1

html ×1