Kazi ya minmax katika Gridi za CSS
Ni rahisi sana kutumia pamoja na auto-fill
kubainisha kazi minmax,
ambayo huweka anuwai ya upana wa safu wima
kutoka kwa thamani ya chini hadi ya juu.
Ikiwa upana wa chombo hautoshi kwa wote
safu wima, basi baadhi yao zitahamia
kwenye mstari mpya, huku safu wima katika mstari
zikigawanywa kwa usawa ndani yake.
Tuangalie kwa mfano. Ili kuweza kuona chaguzi tofauti za kupangia safu wima badilisha upana wa ukurasa:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Andika mfano unaoonyesha
kazi ya minmax.
