Funkcija repeat CSS tinkleliuose
Jei turite kelis stulpelius,
kurių dydžiai yra vienodi,
galite supaprastinti užrašą naudodami
funkciją repeat.
Pirmame šios funkcijos parametre nurodomas
stulpelių skaičius, o antrame - jų plotis.
Pažiūrėkime pavyzdžiais,
kaip tai veikia.
Pavyzdys
Tarkime, kad turime tris vienodo dydžio stulpelius:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Supaprastinkime užrašą naudodami repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Pavyzdys
Tarkime, kad turime tris vienodo dydžio stulpelius, o ketvirtas - kito dydžio:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Supaprastinkime užrašą naudodami repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Pavyzdys
Tarkime, kad pirmieji trys stulpeliai yra vieno dydžio, o antrieji trys stulpeliai - kito dydžio:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Supaprastinkime užrašą naudodami repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Pavyzdys
Tarkime, kad pirmieji trys stulpeliai yra vieno dydžio, tada dar vienas stulpelis, o tada dar trys kito dydžio stulpeliai:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Supaprastinkime užrašą naudodami repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Pavyzdys
Supaprastinimas veikia su bet kuriais dydžio vienetais. Tarkime, pavyzdžiui, kad turime tris stulpelius pikseliais:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Supaprastinkime užrašą naudodami repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Praktinės užduotys
Sukurkite 4 vienodo
dydžio stulpelius naudodami repeat.
Sukurkite 4 100px dydžio stulpelius,
ir dar 3 2fr dydžio stulpelius.
Sukurkite 2 100px dydžio stulpelius,
dar 3 200px dydžio stulpelius,
paskui 1fr dydžio stulpelį,
ir paskui 2 10% dydžio stulpelius.
