Căn chỉnh nội dung theo trục dọc trong CSS Grid
Để căn chỉnh nội dung dọc theo trục dọc
của grid, chúng ta sử dụng
thuộc tính align-content, được
đặt trong phần tử cha.
Theo điểm bắt đầu của trục
Hãy đặt căn chỉnh cho các phần tử của chúng ta trong grid 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-content: 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;
}
:
Theo trung tâm của trục
Bây giờ hãy đặt căn chỉnh phần tử 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-content: 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;
}
:
Theo điểm kết thúc của trục
Hãy đặt căn chỉnh phần tử theo điểm kết thúc 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-content: 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;
}
:
Bài tập thực hành
Tạo một grid bao gồm sáu phần tử, sắp xếp thành hai hàng. Thực hiện căn chỉnh các phần tử theo điểm bắt đầu của trục dọc của grid.
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 các phần tử theo trung tâm của trục dọc của grid.
Thay đổi bài tập trước, để căn chỉnh phần tử xảy ra theo điểm kết thúc của trục dọc.