Chcę umieścić element siatki, który ma być zawsze w ostatnim rzędzie i / lub na ostatniej kolumnie siatki. Nawet jeśli nie wiem, ile wierszy lub kolumn może mieć siatka. Jest coś takiego?

To byłaby moja siatka:

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

Znalazłem tylko umieszczenie przez jawne wiersze lub kolumny: MDN

3
Benedikt 1 marzec 2019, 12:15

2 odpowiedzi

Najlepsza odpowiedź

Następujący Mój komentarz; Z https://developer.mozilla.org / EN-US / DOCS / WWW / CSS / CSS_GRID_LAYOUT / LINE-FARUED_PLACENT_WITH_CSS_GRID # Counting_backwards

Możemy również liczyć wstecz z bloku i koniec końca siatki, dla angielskiego, który byłby prawą linią kolumnową i końcową linią wiersza. Linie te mogą być adresowane jako -1, a możesz zliczyć się stamtąd - więc przedostatni linia jest -2.

2
MatTheCat 1 marzec 2019, 09:32

Możesz użyć elementu pseudo :after, aby umieścić element na końcu siatki - patrz Demo poniżej:

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

Albo możesz użyć właściwości order, aby umieścić element do końca - jeśli jakikolwiek inny element siatki ma order, po prostu podaj dużą wartość. Zobacz poniższy demo:

.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>
2
kukkuz 1 marzec 2019, 09:32