Funkcija repeat CSS gridos
Ja jums ir vairākas kolonnas,
kurām jānorāda vienādi izmēri,
tad ierakstu var vienkāršot, izmantojot
funkciju repeat.
Šīs funkcijas pirmajā parametrā tiek norādīts
kolonnu skaits, bet otrajā - to platums.
Apskatīsim ar piemēriem,
kā tas darbojas.
Piemērs
Pieņemsim, ka mums ir trīs vienāda izmēra kolonnas:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Vienkāršosim ierakstu, izmantojot repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Piemērs
Pieņemsim, ka mums ir trīs vienāda izmēra kolonnas, bet ceturtā ir cita izmēra:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Vienkāršosim ierakstu, izmantojot repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Piemērs
Pieņemsim, ka mums ir pirmās trīs kolonnas viena izmēra, bet otrās trīs kolonnas cita izmēra:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Vienkāršosim ierakstu, izmantojot repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Piemērs
Pieņemsim, ka mums ir pirmās trīs kolonnas viena izmēra, tad vēl kolonna, un tad vēl trīs kolonnas cita izmēra:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Vienkāršosim ierakstu, izmantojot repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Piemērs
Vienkāršošana darbojas jebkurām izmēru vienībām. Pieņemsim, ka mums ir trīs kolonnas pikseļos:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Vienkāršosim ierakstu, izmantojot repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktiskie uzdevumi
Izveidojiet 4 vienāda
izmēra kolonnas, izmantojot repeat.
Izveidojiet 4 kolonnas ar izmēru 100px,
un vēl 3 kolonnas ar izmēru 2fr.
Izveidojiet 2 kolonnas ar izmēru 100px,
vēl 3 kolonnas ar izmēru 200px,
tad kolonnu ar izmēru 1fr,
un tad 2 kolonnas
ar izmēru 10%.
