Thuộc tính viết tắt căn chỉnh phần tử riêng lẻ trong CSS Grid
Có thể đồng thời căn chỉnh một phần tử riêng lẻ
theo cả trục ngang và trục dọc.
Để làm điều này, sử dụng thuộc tính place-self.
Nó nhận hai giá trị cách nhau bởi dấu cách.
Giá trị đầu tiên xác định căn chỉnh
theo chiều dọc, và giá trị thứ hai - theo chiều ngang.
Hãy xem xét các ví dụ.
Giữa theo chiều dọc và bắt đầu theo chiều 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);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: center start;
}
:
Bắt đầu theo chiều dọc và kết thúc theo chiều 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);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: start end;
}
:
Kết thúc theo chiều dọc và giữa theo chiều 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);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: end center;
}
:
Bài tập thực hành
Tạo một grid, bao gồm năm phần tử và sắp xếp chúng thành ba hàng. Thực hiện căn chỉnh phần tử đầu tiên theo điểm bắt đầu của trục ngang và giữa của trục dọc.
Thay đổi bài toán trước đó sao cho việc căn chỉnh phần tử thứ ba được thực hiện theo điểm kết thúc của trục ngang và giữa của trục dọc.
Bây giờ hãy sắp xếp các phần tử của grid thành hai hàng và đặt căn chỉnh cho phần tử thứ năm theo giữa của trục ngang và kết thúc của trục dọc.
Hãy làm sao cho phần tử thứ hai được căn chỉnh theo điểm bắt đầu của trục ngang và kết thúc của trục dọc, còn phần tử thứ tư - theo giữa của trục ngang và điểm bắt đầu của trục dọc.
