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:

html<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>

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

Результат: