Căn chỉnh theo trục dọc bên trong ô của CSS Grid
Để căn chỉnh các phần tử bên trong ô của grid
theo trục dọc, chúng ta sử dụng
thuộc tính align-items, thuộc tính này
được đặt trong phần tử cha. Cách hoạt động của thuộc tính này
có thể thấy khi xem grid trong công cụ
developer của trình duyệt.
Theo điểm bắt đầu của trục
Hãy căn chỉnh các phần tử của chúng ta bên trong ô theo điểm bắt đầu của trục dọc:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: flex-start;
grid-template-columns: 100px 100px;
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;
}
:
Hãy xem grid của chúng ta trong công cụ developer của trình duyệt:
Theo trung tâm của trục
Và bây giờ hãy căn chỉnh các phần tử của chúng ta trong các ô theo trung tâm của trục dọc:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: center;
grid-template-columns: 100px 100px;
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;
}
:
Hãy xem grid của chúng ta trong công cụ developer của trình duyệt:
Theo điểm kết thúc của trục
Một lần nữa thay đổi căn chỉnh của các phần tử, lần này theo điểm kết thúc của trục dọc:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: end;
grid-template-columns: 100px 100px;
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 {
}
:
Hãy xem grid của chúng ta trong công cụ developer của trình duyệt:
Bài tập thực hành
Tạo một grid, bao gồm sáu phần tử, được sắp xếp thành hai cột. Thực hiện căn chỉnh các phần tử bên trong ô theo điểm bắt đầu 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 ba cột và đặt căn chỉnh các phần tử trong ô theo trung tâm của trục dọc của grid.
Thay đổi bài toán trước đó sao cho việc căn chỉnh các phần tử diễn ra theo điểm kết thúc của trục dọc.
