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ą:

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

Результат: