Можно ли сделать так, чтобы элемент сетки всегда отображался в последней строке или в последнем столбце?

Question

Я хочу, чтобы элемент сетки был всегда в последней строке и / или в последнем столбце сетки.Даже если я не знаю, сколько строк или столбцов может иметь сетка.Возможно ли что-то подобное?

Это будет моя сетка:

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

Я нашел размещение только по явным строкам или столбцам: MDN

Answer 1

Вы можете использовать псевдоэлемент :after, чтобы поместить элемент в конец сетки - см. Демонстрацию ниже:

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

.columns div {
  border: 1px solid;
  height: 100px;
}

.columns:after {
  content:'';
  display: block;
  border: 1px solid red;
  height: 100px;
}

<div class="columns">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Или вы можете использовать свойство order, чтобы поместить элемент в конец - если любой другой элемент сетки имеет свойство orderДай большое значение.Смотри демо ниже:

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

.columns div {
  border: 1px solid;
  height: 100px;
}

.columns .last {
  order: 1;
  border: 1px solid red;
}

<div class="columns">
  <div></div>
  <div></div>
  <div></div>
  <div class="last"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

подписок мой комментарий ;от https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid#Counting_backwards

Мы также можем считать в обратном направлении от блока и встроенного конца сетки, для английского языка это будет строка правого столбца и конечная строка строки.Эти строки могут быть обозначены как -1, и вы можете отсчитывать их оттуда, поэтому предпоследняя строка - -2.