Заставить элементы сетки занимать оставшееся пространство - PullRequest
Новая
       7

Заставить элементы сетки занимать оставшееся пространство

0 голосов
/ 10 ноября 2018

миниатюра 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>

1 Ответ

0 голосов
/ 10 ноября 2018

(без добавления нового класса)

Ну, это в значительной степени исключает 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>
...