Auto vērtība CSS gridos
Gridā, norādot rindu un kolonnu
izmērus, var izmantot
vērtību auto. Šajā gadījumā,
bloki vienkārši aizpildīs visu tiem pieejamo
brīvo vietu
atskaitot to platumu,
kas norādīts pikseļos.
Apskatīsim to ar piemēriem.
Norādīsim pirmajai un trešajai kolonnai fiksētu platumu pikseļos, bet otrajai kolonnai ļausim automātiski aizņemt atlikušo vietu:
<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;
}
:
Izvietojiet apakšējos elementus divās
kolonnās: pirmā ar platumu 200px,
bet otra ļaujiet aizņemt
atlikušo vietu.
Izvietojiet apakšējos elementus trīs
kolonnās: pirmā ar platumu 100px,
otra 150px, bet trešā
ļaujiet aizņemt atlikušo vietu.
