Funkcia repeat v CSS gridoch

Ak máte niekoľko stĺpcov, pre ktoré sú nastavené rovnaké veľkosti, môžete zápis zjednodušiť použitím funkcie repeat. V prvom parametri tejto funkcie sa uvádza počet stĺpcov a v druhom - ich šírka. Pozrime sa na príklady, ako to funguje.

Príklad

Predpokladajme, že máme tri stĺpce rovnakej veľkosti:

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

Zjednodušíme zápis pomocou repeat:

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

Príklad

Predpokladajme, že máme tri stĺpce rovnakej veľkosti a štvrtý inej veľkosti:

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

Zjednodušíme zápis pomocou repeat:

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

Príklad

Predpokladajme, že prvé tri stĺpce sú jednej veľkosti a druhé tri stĺpce inej veľkosti:

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

Zjednodušíme zápis pomocou repeat:

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

Príklad

Predpokladajme, že prvé tri stĺpce sú jednej veľkosti, potom ďalší stĺpec a potom ďalšie tri stĺpce inej veľkosti:

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

Zjednodušíme zápis pomocou repeat:

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

Príklad

Zjednodušenie funguje pre všetky jednotky veľkosti. Predpokladajme napríklad, že máme tri stĺpce v pixeloch:

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

Zjednodušíme zápis pomocou repeat:

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

Praktické úlohy