Die Bedeutung von auto in CSS Grids

In Grid kann bei der Angabe der Größen von Zeilen und Spalten der Wert auto verwendet werden. In diesem Fall füllen die Blöcke einfach den gesamten ihnen verfügbaren freien Raum abzüglich der Breite, die in Pixeln angegeben ist. Schauen wir uns das an Beispielen an.

Lassen Sie uns der ersten und dritten Spalte eine feste Breite in Pixeln zuweisen, und die zweite Spalte soll automatisch den verbleibenden Platz einnehmen:

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

Результат: