Как сделать так, чтобы элементы в последнем ряду занимали оставшееся пространство в CSS Grid?

Question

Есть ли способ заставить все элементы в последнем ряду сетки, чтобы заполнить строку, независимо от того, сколько их?

Я не знаю, сколько предметов будет в сетке, поэтому я не могу нацелить их напрямую. Я пытался использовать grid-auto-flow: dense, но это не очень помогает.

Это мой вопрос визуализированный: :

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 

Answer 1

Это невозможно в текущей версии (Уровень 1) CSS Grid .Тем не менее, это не слишком сложно с flexbox.

Вы написали в комментарии:

Я использую Flexbox для отступления.Одна (не единственная) причина, по которой я изучаю сетки, заключается в использовании «пробела» и других функций, которые идут с ним.Например, хотя зазор можно смоделировать с помощью поля, но, поскольку мы не знаем количество элементов в последнем ряду, для устранения боковых зазоров (на стороне контейнера) потребуется дополнительный код.

Вы правы: функция grip-gap в CSS Grid довольно удобна.Однако вы можете эмулировать поведение с помощью полей - без особых сложностей - и во flexbox.

div {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 0px 5px 5px;
  margin: 20px auto;
  width: 400px;
  background: #d8d8d8;

  }
span {
  flex: 1 0 30%;
  height: 50px;
  margin-top: 5px;
  margin-right: 5px;
  background: blue;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
</div>

Answer 2

Это полностью возможно с помощью CSS-сетки, комбинируя правила CSS nth-child и nth-last-of-type. Единственное предостережение в том, что количество столбцов нужно знать заранее.

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

Answer 3

Я не думаю, что CSS Grid - лучший вариант для макета, который вы пытаетесь создать, по крайней мере, если он будет динамичным, и вы не знаете, сколько элементов будет в контейнере.время.Flexbox на самом деле лучше для одномерных макетов;может быть немного сложнее сохранить все в одном и том же размере и использовать все доступное пространство именно так, как вам нужно, но, в конце концов, этот тип случаев - то, для чего создан Flexbox.

И, конечно,Вы также можете использовать ширину 100%, используя несколько вычислений для CSS.

Сетка CSS может быть лучше для сохранения выравнивания строк и столбцов, но это другой случай.

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.flex-item {
  width: 30%;
  border: 1px solid #000;
  flex-grow: 1;
  min-height: 120px;
  box-sizing: border-box;
  margin: 0 5px 10px;
  justify-content: space-between;
  text-align: center;
}

<div class="container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
</div>