Kazi ya repeat kwenye Gridi za CSS
Ikiwa una safu wima nyingi,
ambazo zinapewa vipimo sawa,
basi unaweza kurahisisha maandishi kwa kutumia
kazi ya repeat.
Kwenye parameta ya kwanza ya kazi hii imeelezwa
idadi ya safu wima, na ya pili - upana wao.
Wacha tuangalie kwa mifano,
jinsi hii inavyofanya kazi.
Mfano
Wacha tuseme tuna safu wima tatu zenye ukubwa sawa:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Wacha turahisishe maandishi kwa kutumia repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Mfano
Wacha tuseme tuna safu wima tatu zenye ukubwa sawa, na ya nne yenye ukubwa tofauti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Wacha turahisishe maandishi kwa kutumia repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Mfano
Wacha tuseme tuna safu wima tatu za kwanza zenye ukubwa mmoja, na safu wima tatu za pili zenye ukubwa tofauti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Wacha turahisishe maandishi kwa kutumia repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Mfano
Wacha tuseme tuna safu wima tatu za kwanza zenye ukubwa mmoja, kisha safu wima nyingine, na kisha safu wima tatu nyingine zenye ukubwa tofauti:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Wacha turahisishe maandishi kwa kutumia repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Mfano
Urahisishaji unafanya kazi kwa vitengo vyovyote vya ukubwa. Wacha tuseme kwa mfano tuna safu wima tatu kwenye saizi za pikseli:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Wacha turahisishe maandishi kwa kutumia repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Kazi za Vitendo
Tengeneza safu wima 4 zenye ukubwa sawa
kwa kutumia repeat.
Tengeneza safu wima 4 zenye ukubwa 100px,
na safu wima 3 nyingine zenye ukubwa 2fr.
Tengeneza safu wima 2 zenye ukubwa 100px,
safu wima 3 nyingine zenye ukubwa 200px,
kisha safu wima yenye ukubwa 1fr,
na kisha safu wima 2
zenye ukubwa 10%.
