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:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Egyszerűsítsük a jelölést a repeat segítségével:
#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ű:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Egyszerűsítsük a jelölést a repeat segítségével:
#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ű:
#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:
#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:
#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:
#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:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Egyszerűsítsük a jelölést a repeat segítségével:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Gyakorlati feladatok
Készítsen 4 azonos méretű
oszlopot a repeat segítségével.
Készítsen 4, 100px méretű oszlopot,
és további 3, 2fr méretű oszlopot.
Készítsen 2, 100px méretű oszlopot,
további 3, 200px méretű oszlopot,
majd egy 1fr méretű oszlopot,
és végül 2,
10% méretű oszlopot.
