CSS Grid'de auto Değeri

Grid'de satır ve sütun boyutlarını belirtirken auto değerini kullanabilirsiniz. Bu durumda, bloklar, piksel cinsinden belirtilen genişlik çıkarıldıktan sonra kalan tüm kullanılabilir boş alanı dolduracaktır. Hadi örneklerle inceleyelim.

Birinci ve üçüncü sütunlara piksel cinsinden sabit bir genişlik belirleyelim ve ikinci sütunun kalan yeri otomatik olarak doldurmasını sağlayalım:

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

Результат: