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:

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

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

Alt elemanları iki sütuna yerleştirin: ilk sütunun genişliği 200px, ikinci sütun ise kalan yeri doldursun.

Alt elemanları üç sütuna yerleştirin: ilk sütunun genişliği 100px, ikinci sütun 150px, üçüncü sütun ise kalan yeri doldursun.