Auto reikšmė CSS garduose
Garde nurodant eilučių ir stulpelių dydžius
galima naudoti reikšmę auto. Šiuo atveju,
blokai tiesiog užpildys visą jiems prieinamą
laisvą erdvę
atėmus tą plotį,
kuris nurodytas pikseliais.
Pažiūrėkime pavyzdžiais.
Nurodykime pirmam ir trečiam stulpeliams fiksuotą plotį pikseliais, o antrasis stulpelis tegu automatiškai užima likusią vietą:
<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;
}
:
Išdėstykite dukterinius elementus į du
stulpelius: pirmo plotis 200px,
o antrasis tegu užima
likusią vietą.
Išdėstykite dukterinius elementus į tris
stulpelius: pirmo plotis 100px,
antro 150px, o trečiasis
tegu užima likusią vietą.
