Arti nilai auto dalam CSS Grid

Dalam grid, saat menentukan ukuran baris dan kolom, Anda dapat menggunakan nilai auto. Dalam hal ini, blok hanya akan mengisi semua ruang kosong yang tersedia setelah dikurangi lebar yang ditentukan dalam piksel. Mari kita lihat contohnya.

Mari kita tentukan lebar tetap dalam piksel untuk kolom pertama dan ketiga, dan biarkan kolom kedua secara otomatis menempati sisa ruang yang tersedia:

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

Tempatkan elemen anak dalam dua kolom: kolom pertama lebar 200px, dan kolom kedua biarkan menempati sisa ruang yang tersedia.

Tempatkan elemen anak dalam tiga kolom: kolom pertama lebar 100px, kolom kedua 150px, dan kolom ketiga biarkan menempati sisa ruang yang tersedia.