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

cssbộ 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

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

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

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

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

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

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