Giá trị auto trong CSS Grid

Trong Grid, khi chỉ định kích thước hàng và cột, bạn có thể sử dụng giá trị auto. Trong trường hợp này, các phần tử sẽ lấp đầy tất cả không gian còn lại mà chúng có thể sử dụng, trừ đi chiều rộng được chỉ định bằng pixel. Hãy xem các ví dụ.

Hãy đặt chiều rộng cố định bằng pixel cho cột thứ nhất và thứ ba, còn cột thứ hai sẽ tự động chiếm phần không gian còn lại:

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

Sắp xếp các phần tử con thành hai cột: cột đầu tiên rộng 200px, còn cột thứ hai sẽ chiếm phần không gian còn lại.

Sắp xếp các phần tử con thành ba cột: cột đầu tiên rộng 100px, cột thứ hai 150px, còn cột thứ ba sẽ chiếm phần không gian còn lại.