CSS grid-lerde “auto” bahasy

Grid-de hatarlaryň we sütünleriň ölçeglerini görkezende auto bahasyny ulanyp bolýar. Bu ýagdaýda, bloglar elýeterli bolan boş ýeri, piksel görkezilen ini çykaryp, ýöne ýerleşdirer. Mysallara seredeliň.

Birinji we üçünji sütünlere pikselde belgilenen ini görkezeliň, ikinji sütün bolsa galan ýeri awtomatik ýerleşdirsin:

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

Результат: