Thuộc tính place-items

Thuộc tính place-items xác định đồng thời việc căn chỉnh các cột và hàng, điều này làm giảm đáng kể mã chúng ta sử dụng. Giá trị đầu tiên chúng ta xác định vị trí của phần tử theo trục dọc, và giá trị thứ hai - theo trục ngang. Thuộc tính place-items được đặt trong phần tử cha. Việc thực hiện công việc với place-items thuận tiện để xem qua công cụ kiểm tra của trình duyệt.

Cú pháp

bộ chọn {
	place-items: giá trị căn chỉnh theo chiều ngang giá trị căn chỉnh theo chiều dọc;
}

Ví dụ . Căn giữa theo trục dọc và căn đầu theo trục ngang

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

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Hãy cùng xem lưới của chúng ta qua công cụ kiểm tra trình duyệt:

Ví dụ . Căn cuối theo trục dọc và căn giữa theo trục ngang

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

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Và bây giờ hãy nhìn vào bảng điều khiển công cụ kiểm tra:

Ví dụ . Căn đầu theo trục dọc và căn cuối theo trục ngang

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

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Hãy cùng xem cách căn chỉnh các phần tử trong các ô bằng công cụ kiểm tra trình duyệt:

Xem thêm

thuộc tính justify-items,
xác định cách căn chỉnh các phần tử bên trong ô lưới theo trục ngang
thuộc tính align-items,
xác định cách căn chỉnh theo trục chéo