CSS grid-теріздіктеріндегі repeat функциясы
Егер сізде бірдей өлшемдер берілген бірнеше баған болса,
онда жазуды repeat функциясын қолданып жеңілдетуге болады.
Бұл функцияның бірінші параметрінде бағандар саны көрсетіледі, ал екіншісінде - олардың ені.
Мысалдар арқылы бұл қалай жұмыс істейтінін көрейік.
Мысал
Бізде бірдей өлшемді үш баған бар делік:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Жазуды repeat арқылы жеңілдетейік:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Мысал
Бізде бірдей өлшемді үш баған бар, ал төртінші басқа өлшемде делік:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Жазуды repeat арқылы жеңілдетейік:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Мысал
Бізде алғашқы үш баған бір өлшемде, ал келесі үш баған басқа өлшемде делік:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Жазуды repeat арқылы жеңілдетейік:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Мысал
Бізде алғашқы үш баған бір өлшемде, содан кейін тағы бір баған, ал одан кейін тағы үш баған басқа өлшемде делік:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Жазуды repeat арқылы жеңілдетейік:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Мысал
Жеңілдету кез келген өлшем бірліктері үшін жұмыс істейді. Мысал ретінде бізде пиксельдегі үш баған бар делік:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Жазуды repeat арқылы жеңілдетейік:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Практикалық тапсырмалар
repeat көмегімен бірдей өлшемді 4 баған жасаңыз.
Өлшемі 100px болатын 4 баған және өлшемі 2fr болатын тағы 3 баған жасаңыз.
Өлшемі 100px болатын 2 баған,
өлшемі 200px болатын тағы 3 баған,
содан кейін өлшемі 1fr болатын баған,
ал одан кейін өлшемі 10% болатын 2 баған жасаңыз.
