CSS Gridlarda auto qiymati

Gridda qator va ustun o‘lchamlarini ko‘rsatishda auto qiymatidan foydalanish mumkin. Bunday holda, bloklar ular uchun mavjud bo‘lgan barcha bo‘sh joyni, piksellarda ko‘rsatilgan kenglikdan tashqarida, to‘ldiradi. Keling, misollar orqali ko‘rib chiqaylik.

Keling, birinchi va uchinchi ustunlarga piksellarda belgilangan kenglikni ko‘rsataylik, ikkinchi ustun esa qolgan joyni avtomatik ravishda egallasin:

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

Результат: