Make grid items take up remaining space

Question

thumbnail x 4, , one column can fill in 3 thumbnail, the 4th one go under and fill in rest of the space (without adding new class).

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

score 4 · Answer 1 · answered Nov 10 '18 at 00:51

(without adding a new class)

Well, that pretty much rules out CSS Grid. You need a new rule to tell the last item to expand:

.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 can work without adding a new class:

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

so there no way, grid can do this? My idea is: the "thumbnail" will expend the whole space, then by keep adding more "thumbnail" behind, it will automatically fit in, and the max is 3. So If it 2 "thumbnail", it should share the space 50% 50% — Yan Mak, Nov 12 '18 at 17:56

Make grid items take up remaining space

1 Answers1