Auto väärtus CSS grid'ides
Grid'is saab ridade ja veergude suuruste
määramisel kasutada
väärtust auto. Sel juhul
blokid lihtsalt täidavad kogu neile
saadaoleva vaba ruumi
miinus see laius,
mis on määratud pikslites.
Vaatame näidete varal.
Määrame esimesele ja kolmandale veerule fikseeritud laiuse pikslites, ning laseme teisel veerul automaatselt võtta ülejäänud ruumi:
<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;
}
:
Paiguta lapselemendid kahte
veergu: esimene laiusega 200px,
ning teine võtku üle
ülejäänud ruumi.
Paiguta lapselemendid kolme
veergu: esimene laiusega 100px,
teine 150px, ning kolmas
võtku üle ülejäänud ruumi.
