Význam auto-fit v CSS gridu

Nyní se podívejme na hodnotu auto-fit, která se také používá při určování sloupců stejné velikosti společně s funkcí repeat. Její rozdíl od hodnoty auto-fill spočívá v tom, že auto-fit přizpůsobuje počet sloupců dostupné šířce kontejneru, rozšiřuje nebo zmenšuje je.

Příklad

Podívejme se na funkci hodnoty auto-fit na příkladu kontejneru s osmi prvky. Aplikujme společně s hodnotou auto-fit vám známou funkci minmax z předchozí lekce:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Příklad

A nyní zmenšíme šířku grid kontejneru na 400px:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Praktické úkoly