Betekenis van auto-fit in CSS-roosters
Laat ons nou die waarde auto-fit oorweeg,
wat ook toegepas word wanneer gelyke grootte kolomme gespesifiseer word saam
met die repeat-funksie.
Die verskil daarvan met die waarde auto-fill is dat
auto-fit die aantal kolomme aanpas by
die beskikbare breedte van die houer deur hulle uit te brei of
saam te trek.
Voorbeeld
Kom ons kyk na die werking van die waarde auto-fit
aan die hand van 'n voorbeeld van 'n houer met agt elemente. Laat ons dit toepas
saam met die waarde auto-fit en die funksie minmax wat jy ken
uit die vorige les:
<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-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Voorbeeld
Laat ons nou die breedte van die roosterhouer verminder
na 400px:
<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-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Praktiese take
Gestel jy het 'n tabel met nege elemente.
Stel vir hulle, met behulp van die waarde auto-fit,
so 'n kolombreedte en roosterhouerbreedte in dat
alle kindelemente in drie rye geplaas word.
Pas nou die vorige taak so aan dat alle elemente in twee rye geplaas word.