A repeat függvény a CSS grid-ekben

Ha több olyan oszlopa van, amelyek azonos méretűek, akkor leegyszerűsítheti a jelölést a repeat függvény használatával. A függvény első paraméterében az oszlopok száma, a másodikban pedig a szélességük van megadva. Nézzük meg példákon keresztül, hogyan működik.

Példa

Tegyük fel, hogy három azonos méretű oszlopunk van:

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

Egyszerűsítsük a jelölést a repeat segítségével:

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

Példa

Tegyük fel, hogy három azonos méretű oszlopunk van, és egy negyedik, másik méretű:

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

Egyszerűsítsük a jelölést a repeat segítségével:

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

Példa

Tegyük fel, hogy az első három oszlop azonos méretű, a második három oszlop pedig másik méretű:

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

Egyszerűsítsük a jelölést a repeat segítségével:

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

Példa

Tegyük fel, hogy az első három oszlop azonos méretű, aztán jön még egy oszlop, majd még három másik méretű oszlop:

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

Egyszerűsítsük a jelölést a repeat segítségével:

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

Példa

Az egyszerűsítés minden mértékegységre működik. Tegyük fel például, hogy három, pixelben megadott oszlopunk van:

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

Egyszerűsítsük a jelölést a repeat segítségével:

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

Gyakorlati feladatok