html - 使网格项占用剩余空间

Question

thumbnail x 4, , 一栏可以填 3 个缩略图，第 4 栏往下填剩余空间（不添加新类）。

.tile {
  max-width: 350px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.thumbnail {
  padding: 20px;
  height: auto;
  background-color: #ff0099;
  color: #fff;
}

<div class="item tile">
  <div class="thumbnail">Grid - Thumbnail #1</div>
  <div class="thumbnail">Grid - Thumbnail #2</div>
  <div class="thumbnail">Grid - Thumbnail #3</div>
  <div class="thumbnail">Grid - Thumbnail #4</div>
</div>

Answer 1

（不添加新类）

好吧，这几乎排除了 CSS Grid。您需要一条新规则来告诉最后一项展开：

.tile {
  max-width: 350px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.thumbnail {
  padding: 20px;
  background-color: #ff0099;
  color: #fff;
}

 /* new */
.thumbnail:last-child {
  grid-column: 1 / -1;
}

<div class="item tile">
  <div class="thumbnail">Grid - Thumbnail #1</div>
  <div class="thumbnail">Grid - Thumbnail #2</div>
  <div class="thumbnail">Grid - Thumbnail #3</div>
  <div class="thumbnail">Grid - Thumbnail #4</div>
</div>

Flexbox 可以在不添加新类的情况下工作：

.tile {
  max-width: 350px;
  display: flex;
  flex-wrap: wrap;
}

.thumbnail {
  flex: 1 0 95px;  /* flex-grow, flex-shrink, flex-basis */
  margin: 5px;
  padding: 10px;
  background-color: #ff0099;
  color: #fff;
  box-sizing: border-box;
}

<div class="item tile">
  <div class="thumbnail">Grid - Thumbnail #1</div>
  <div class="thumbnail">Grid - Thumbnail #2</div>
  <div class="thumbnail">Grid - Thumbnail #3</div>
  <div class="thumbnail">Grid - Thumbnail #4</div>
</div>