Lưới ngầm định trong CSS

Lưới ngầm định được trình duyệt tạo ra tự động, khi số lượng phần tử không vừa với lưới tường minh. Hãy cùng xem điều này xảy ra như thế nào.

Giả sử chúng ta có bốn khối:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem3">4</div>
</div>

Giả sử lưới của chúng ta có kích thước 3 trên 3:

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
}

Hãy đặt ba khối của chúng ta theo lưới:

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}

Và đặt khối thứ tư ở hàng thứ tư và cột thứ tư:

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Vì lưới của chúng ta có kích thước 3 trên 3, nên sẽ không có hàng thứ tư và cột thứ tư như vậy trong lưới này. Nhưng chúng sẽ không tồn tại ở dạng tường minh, tức là dạng do chúng ta đặt. Nhưng trình duyệt sẽ tạo ra chúng một cách ngầm định, tức là tự động.

Trong trường hợp này, vì chúng ta chỉ chỉ định kích thước cho lưới tường minh, nên đối với các ô nằm ngoài lưới này, kích thước sẽ được trình duyệt tính toán. Tức là trong trường hợp của chúng ta, kích thước của khối thứ tư sẽ được trình duyệt đặt tự động.

Hãy xem chúng ta nhận được kết quả gì:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}
#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Giả sử trong lưới của bạn có 6 khối. Hãy đặt 3 khối trong lưới tường minh, và ba khối trong lưới ngầm định.