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

cssphầ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

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

css#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

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

css#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

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

css#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