Maana ya auto kwenye Gridi za CSS
Kwenye gridi, wakati wa kubainisha vipimo vya
safu na nguzo, unaweza kutumia
thamani auto. Katika kesi hiyo,
vitalu vitajaza tu nafasi yote inayopatikana
iliyobaki
bila upana ambao
umebainishwa kwenye pikseli.
Tuangalie kwa mifano.
Wacha tubainishe upana maalum kwa pikseli kwenye nguzo ya kwanza na ya tatu, na wacha nguzo ya pili iichukue nafasi iliyobaki kiotomatiki:
<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: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Weka vitoto viwili kwa nguzo mbili:
nguzo ya kwanza iwe na upana wa 200px,
na ya pili wacha iichukue
nafasi iliyobaki.
Weka vitoto kwa nguzo tatu:
nguzo ya kwanza iwe na upana wa 100px,
ya pili 150px, na ya tatu
wacha iichukue nafasi iliyobaki.
