Maksud auto dalam Grid CSS

Dalam grid, apabila menentukan saiz baris dan lajur, anda boleh menggunakan nilai auto. Dalam kes ini, blok hanya akan mengisi semua ruang kosong yang tersedia untuk mereka ditolak dengan lebar yang dinyatakan dalam piksel. Mari kita lihat contohnya.

Mari kita tetapkan lebar tetap dalam piksel untuk lajur pertama dan ketiga, dan biarkan lajur kedua secara automatik mengambil ruang yang tinggal:

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

Letakkan elemen anak dalam dua lajur: lebar pertama 200px, dan biarkan yang kedua mengambil ruang yang tinggal.

Letakkan elemen anak dalam tiga lajur: lebar pertama 100px, kedua 150px, dan biarkan yang ketiga mengambil ruang yang tinggal.