CSS-gridien repeat-funktio

Jos sinulla on useita sarakkeita, joille on asetettu samat mitat, voit yksinkertaistaa merkintää käyttämällä funktiota repeat. Tämän funktion ensimmäisessä parametrissa määritetään sarakkeiden lukumäärä ja toisessa - niiden leveys. Katsotaan esimerkkien avulla, kuinka tämä toimii.

Esimerkki

Oletetaan, että meillä on kolme samankokoista saraketta:

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

Yksinkertaistetaan merkintää repeat-funktion avulla:

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

Esimerkki

Oletetaan, että meillä on kolme samankokoista saraketta ja neljäs erikokoinen:

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

Yksinkertaistetaan merkintää repeat-funktion avulla:

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

Esimerkki

Oletetaan, että meillä on kolme ensimmäistä saraketta yhdestä koosta ja toiset kolme saraketta toisesta koosta:

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

Yksinkertaistetaan merkintää repeat-funktion avulla:

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

Esimerkki

Oletetaan, että meillä on kolme ensimmäistä saraketta yhdestä koosta, sitten toinen sarake, ja sitten vielä kolme saraketta toisesta koosta:

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

Yksinkertaistetaan merkintää repeat-funktion avulla:

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

Esimerkki

Yksinkertaistaminen toimii kaikille mittayksiköille. Otetaan esimerkiksi kolme pikselimittaista saraketta:

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

Yksinkertaistetaan merkintää repeat-funktion avulla:

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

Käytännön tehtävät