Thuộc tính grid-template

Thuộc tính grid-template xác định số lượng và chiều rộng của các hàng và cột mà một phần tử sẽ chiếm trong grid (lưới) và là dạng viết tắt của các thuộc tính grid-template-rows và grid-template-columns. Các hàng và cột, trên đó phần tử sẽ được đặt, được chỉ định thông qua dấu gạch chéo. Thuộc tính grid-template được đặt trong phần tử cha và xác định vị trí của các phần tử con. Trong giá trị của thuộc tính, chúng ta chỉ định chiều rộng của hàng hoặc cột bằng bất kỳ đơn vị đo kích thước nào.

Khi chỉ định giá trị pixel trong thuộc tính, kích thước của các phần tử sẽ chính xác tương ứng. Nếu chúng ta đặt từ khóa auto, thì các cột và hàng sẽ lấp đầy tất cả không gian có sẵn. Việc sử dụng đơn vị fr (fraction - phân số) có nghĩa là tất cả không gian sẽ được chia thành các phần bằng nhau. Ưu điểm của fr là khả năng thích ứng của nó với các container khác nhau hoặc độ phân giải màn hình, vì fr chỉ đơn giản chia không gian đó thành số lượng phân số được chỉ định mà không gắn với kích thước chính xác theo pixel.

Cú pháp

selector {
	grid-template: chiều rộng và số lượng hàng / chiều rộng và số lượng cột;
}

Ví dụ

Hãy sử dụng thuộc tính grid-template để tạo một bảng:

<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>9</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ví dụ

Bây giờ hãy đặt chiều rộng bằng nhau cho hàng thứ hai và thứ ba, và chiều rộng khác nhau cho mỗi cột:

<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>9</div>
</div>

#parent {
	display: grid;
	grid-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ví dụ

Bây giờ, trong bảng từ ví dụ trước, hãy làm cho hàng trên cùng có chiều rộng bằng hai phân số, và cột đầu tiên - bằng nửa phân số:

<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>9</div>
</div>

#parent {
	display: grid;
	grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Xem thêm

thuộc tính grid,
thiết lập dạng viết tắt cho các thuộc tính cột và hàng
thuộc tính grid-template-rows,
xác định số lượng và chiều rộng của các hàng trong grid
thuộc tính grid-template-columns,
xác định số lượng và chiều rộng của các cột trong grid