Auto-arvon merkitys CSS-gridissä

Gridissä, kun määritetään rivien ja sarakkeiden kokoa, voidaan käyttää arvoa auto. Tässä tapauksessa lohkot täyttävät yksinkertaisesti kaiken niille saatavilla olevan vapaan tilan pois lukien ne leveydet, jotka on määritetty pikseleinä. Katsotaanpa esimerkkien avulla.

Määritetään ensimmäiselle ja kolmannelle sarakkeelle kiinteä leveys pikseleinä, ja toinen sarake ottakoon automaattisesti jäljellä olevan tilan:

<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;
}

Sijoita lapsielementit kahteen sarakkeeseen: ensimmäinen, jonka leveys on 200px, ja toinen ottakoon jäljellä olevan tilan.

Sijoita lapsielementit kolmeen sarakkeeseen: ensimmäinen, jonka leveys on 100px, toinen 150px, ja kolmas ottakoon jäljellä olevan tilan.