Funkce repeat v CSS gridu

Pokud máte několik sloupců, pro které jsou nastaveny stejné velikosti, můžete zápis zjednodušit použitím funkce repeat. V prvním parametru této funkce se uvádí počet sloupců a ve druhém - jejich šířka. Podívejme se na příkladech, jak to funguje.

Příklad

Předpokládejme, že máme tři sloupce stejné velikosti:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Zjednodušíme zápis pomocí repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Příklad

Předpokládejme, že máme tři sloupce stejné velikosti a čtvrtý sloupec jiné velikosti:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

Zjednodušíme zápis pomocí repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

Příklad

Předpokládejme, že první tři sloupce mají jednu velikost a druhé tři sloupce jinou velikost:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

Zjednodušíme zápis pomocí repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Příklad

Předpokládejme, že první tři sloupce mají jednu velikost, pak další sloupec a pak další tři sloupce jiné velikosti:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

Zjednodušíme zápis pomocí repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

Příklad

Zjednodušení funguje pro jakékoli jednotky velikosti. Předpokládejme pro příklad, že máme tři sloupce v pixelech:

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Zjednodušíme zápis pomocí repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

Praktické úlohy