Valoarea auto în grid-urile CSS

Într-un grid, atunci când specificați dimensiunile rândurilor și coloanelor, puteți utiliza valoarea auto. În acest caz, elementele pur și simplu vor umple tot spațiul liber disponibil pentru ele minus lățimea care este specificată în pixeli. Să ne uităm la exemple.

Să setăm pentru prima și a treia coloană o lățime fixă în pixeli, iar a doua coloană să ocupe automat spațiul rămas:

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

Результат: