Thuộc tính place-self

Thuộc tính place-self xác định cách căn chỉnh một phần tử riêng lẻ trong Grid theo cả trục dọc và trục ngang một lúc. Trong giá trị của thuộc tính, mục đầu tiên chỉ định cách căn chỉnh theo trục dọc, mục thứ hai - cách căn chỉnh phần tử riêng lẻ trong Grid theo trục ngang. Thuộc tính được đặt trong phần tử mà chúng ta muốn căn chỉnh.

Cú pháp

phần-tử {
	place-self: giá-trị-cho-trục-dọc giá-trị-cho-trục-ngang;
}

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	place-self: center start;
}

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	place-self: start end;
}

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	place-self: end center;
}

Xem thêm

thuộc tính justify-self,
xác định cách căn chỉnh một phần tử riêng lẻ trong Grid theo trục ngang
thuộc tính align-self,
xác định cách căn chỉnh một khối riêng lẻ