Funcția repeat în grid-urile CSS
Dacă aveți mai multe coloane,
care au dimensiuni identice,
puteți simplifica scrierea folosind
funcția repeat.
În primul parametru al acestei funcții se specifică
numărul de coloane, iar în al doilea - lățimea lor.
Să vedem în exemple,
cum funcționează.
Exemplul
Să presupunem că avem trei coloane de aceeași dimensiune:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Să simplificăm scrierea cu repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Exemplul
Să presupunem că avem trei coloane de aceeași dimensiune, iar a patra de altă dimensiune:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Să simplificăm scrierea cu repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Exemplul
Să presupunem că primele trei coloane au aceeași dimensiune, iar următoarele trei coloane au altă dimensiune:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Să simplificăm scrierea cu repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Exemplul
Să presupunem că primele trei coloane au aceeași dimensiune, apoi încă o coloană, și apoi încă trei coloane de altă dimensiune:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Să simplificăm scrierea cu repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Exemplul
Simplificarea funcționează pentru orice unități de dimensiuni. Să presupunem, de exemplu, că avem trei coloane în pixeli:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Să simplificăm scrierea cu repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Sarcini practice
Creați 4 coloane de aceeași
dimensiune folosind repeat.
Creați 4 coloane de dimensiunea 100px,
și încă 3 coloane de dimensiunea 2fr.
Creați 2 coloane de dimensiunea 100px,
încă 3 coloane de dimensiunea 200px,
apoi o coloană de dimensiunea 1fr,
și apoi 2 coloane
de dimensiunea 10%.
