Số lượng và độ rộng cột trong CSS Grid

Chúng ta sẽ bắt đầu làm quen với việc làm việc trong Grid bằng cách thiết lập số lượng và độ rộng của các cột, theo đó các phần tử con sẽ được sắp xếp. Để làm mục đích này, chúng ta sử dụng thuộc tính grid-template-columns, được chỉ định trong phần tử cha và xác định số lượng và độ rộng của các cột mà các phần tử con sẽ chiếm trong Grid. Trong giá trị của thuộc tính, chúng ta chỉ định độ rộng cột bằng pixel.

Ví dụ

Trước tiên, hãy tạo một phần tử cha và biến nó thành một grid container. Giả sử chúng ta có một div, trong đó chứa bốn phần tử con. Hãy đặt cho nó trong thuộc tính display giá trị grid, và trong thuộc tính grid-template-columns khai báo độ rộng cho hai cột:

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

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ví dụ

Bây giờ, hãy tạo một bảng với bốn cột có kích thước khác nhau:

<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: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

Giả sử bạn có một div với chín phần tử con. Hãy biến phần tử cha thành một grid container.

Sắp xếp các phần tử con thành hai cột có độ rộng 200px.

Sắp xếp các phần tử con thành ba cột có độ rộng 150px.

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, và cột thứ ba 200px.