CSS Grid-də auto dəyəri

Grid-də sətir və sütun ölçülərini təyin edərkən auto dəyərindən istifadə etmək olar. Bu halda, bloklar sadəcə onlara mövcud olan sərbəst yeri, piksel ilə təyin olunmuş eni çıxmaqla, dolduracaq. Gəlin nümunələr üzərində baxaq.

Gəlin birinci və üçüncü sütunlara piksel ilə sabit en təyin edək, ikinci sütun isə qalan yeri avtomatik olaraq doldursun:

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

Результат: