Thuộc tính viết tắt cho hàng và cột trong CSS Grid

Có những tình huống mà việc chỉ định kích thước cho các hàng và cột dưới dạng viết tắt sẽ thuận tiện hơn. Để làm điều này, chúng ta sử dụng thuộc tính grid-template, được chỉ định cho phần tử cha và là dạng viết tắt của hai thuộc tính grid-template-rows và grid-template-columns.

Hàng và cột cho grid container được chỉ định thông qua dấu gạch chéo, kích thước của chúng được xác định bằng các đơn vị đo lường.

Ví dụ

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

<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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ví dụ

Bây giờ, hãy đặt chiều rộng giố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: 600px;
	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 fr và cột đầu tiên bằng nửa fr:

<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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Bài tập thực hành

Thực hiện layout ô lưới sau: