Người Viết : ViKiMi Editor
Xử lý grid container với align-content
Cách xử lý tốt hơn và dễ kiểm soát hơn. Giúp đưa ra nhiều lựa chọn tối ưu cho các cách hiển thị. Trong phần này việc hiển thị với thuộc tính căn chỉnh align-content sẽ giúp căn chỉnh các phần tử theo chiều dọc của màn hình. Các hàng sẽ được căn chỉnh khoảng với nhau dựa vào giá trị gán cho align-content.
Ví dụ 6 về Grid content
6. Thuộc tính align-content
Thuộc tính align-content được sử dụng căn ( các phần tử ) theo chiều dọc của container Phần tử Cha.
Chú ý : Chiều cao của các phần tử grid cộng lại phải nhỏ hơn chiều cao của container phần tử cha.
Việc căn chỉnh theo chiều dọc là căn chỉnh cho các row (hà) theo chiều dọc nhé (Chiều dọc của màn hình).
6.1 align-content : center
Giá trị “center” sẽ căn chỉnh các row vào giữa khung chứa theo chiều dọc màn hình.
.grid-PTCha-align-center {
display: grid;
height: 400px;
align-content: center;
grid-template-columns: 200px 200px 200px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-align-center > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Giá trị “center” sẽ căn chỉnh các row vào giữa khung chứa theo chiều dọc màn hình.
<div class=”grid-PTCha-align-center”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
</div>
Tại đây, ta có 3 cột với độ rộng các cột là 200px; khi thuộc tính align-center được định nghĩa thì các row sẽ được căn chỉnh vào giữa (theo chiều dọc của màn hình). Kết quả như bên dưới.
Lưu ý : các phần tử thẻ DIV được đưa vào các hàng lần lượt từ cột 1 tới cột 3, vì chúng ta có 3 cột.
6.2 align-content : space-evenly
Giá trị “space-evenly” sẽ cho các rows khoảng cách giữa và chung quanh các rows là bằng nhau.
.grid-PTCha-align-space-evenly {
display: grid;
height: 400px;
align-content: space-evenly;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: green;
padding: 10px;
}
.grid-PTCha-align-space-evenly > div {
background-color: orange;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Giá trị “space-evenly” sẽ cho các rows khoảng cách giữa và chung quanh các rows là bằng nhau.
<div class=”grid-PTCha-align-space-evenly”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Chúng ta có kết quả :
6.3 align-content : space-around
Giá trị ‘space-around’ sẽ cho các rows khoảng cách chung quanh các rows là bằng nhau ( Tính theo chiều dọc màn hình).
.grid-PTCha-align-space-around {
display: grid;
height: 400px;
align-content: space-around;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: green;
padding: 10px;
}
.grid-PTCha-align-space-around > div {
background-color: gray;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Giá trị ‘space-around’ sẽ cho các rows khoảng cách chung quanh các rows là bằng nhau ( Tính theo chiều dọc màn hình).
<div class=”grid-PTCha-align-space-around”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Chúng ta có kết quả :
6.4 align-content : space-between
Giá trị “space-between” sẽ cung cấp cho các rows khoảng cách trống ở giữa các rows là bằng nhau.
.grid-PTCha-align-space-between {
display: grid;
height: 400px;
align-content: space-between;
grid-template-columns: auto auto;
gap: 10px;
background-color: lightblue;
padding: 10px;
}
.grid-PTCha-align-space-between > div {
background-color: green;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Giá trị “space-between” sẽ cung cấp cho các rows khoảng cách trống ở giữa các rows là bằng nhau.
<div class=”grid-PTCha-align-space-between”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Chúng ta có kết quả :
6.5 align-content : start
Giá trị ‘start’ sẽ căn chỉnh các rows tại vị bắt đầu của khung chứa Container PTCha.
.grid-PTCha-Align-Start{
display: grid;
height: 400px;
align-content: start;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightblue;
padding: 10px;
}
.grid-PTCha-Align-Start > div {
background-color: brown;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Với đoạn nội dung bên dưới sẽ có :
<div class=”grid-PTCha-Align-Start”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Chúng ta có kết quả :
6.6 align-content : end
Giá trị ‘end’ sẽ căn các rows về vị trí cuối cùng của khung chứa container PTCha.
.grid-PTCha-align-end{
display: grid;
height: 400px;
align-content: end;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightgreen;
padding: 10px;
}
.grid-PTCha-align-end > div {
background-color: Red;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Giá trị ‘end’ sẽ căn các rows về vị trí cuối cùng của khung chứa container PTCha.
Với đoạn nội dung bên dưới ta có.
<div class=”grid-PTCha-align-end”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Chúng ta có kết quả :
<div class="grid-layout">
<?php echo 'Hello, you are here. Thats building grid layout in HTML AND CSS';?>
<h1>Hello, you are here. Thats building grid layout in HTML AND CSS</h1>
</div>
