Die betekenis van auto in CSS-roosters

In 'n rooster kan die waarde auto gebruik word wanneer groottes vir rye en kolomme gespesifiseer word. In hierdie geval sal die blokke eenvoudig al die beskikbare vrye spasie vul, minus die breedte wat in pixels gespesifiseer is. Kom ons kyk na voorbeelde.

Kom ons spesifiseer 'n vaste breedte in pixels vir die eerste en derde kolom, en laat die tweede kolom outomaties die oorblywende spasie neem:

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

Результат: