Maana ya auto-fill katika Gridi za CSS
Kwa ajili ya kuweka ukubwa wa safu wima sawa za chombo cha gridi
ni rahisi sana kutaja katika kitendakazi repeat
thamani auto-fill, ambayo kwayo
chombo chetu kitajazwa na safu wima sawa
za upana tuliotaka.
Wacha tutengeneze jedwali la vitu nane na
tukabidi upana wa kila safu wima uwe 200px.
Wakati huo huo, thamani auto-fill
ibaini peke yake idadi inayohitajika ya safu wima:
<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, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Weka upana wa safu wima kuwa 200px.
Badilisha upana wa kipenzi element and
uangalie jinsi idadi ya safu wima inavyobadilika.
