Người Viết : ViKiMi Editor
Xử lý grid container với justify-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 justify-content sẽ giúp căn chỉnh các phần tử theo các cột. Các cột sẽ được căn chỉnh khoảng với nhau dựa vào giá trị gán cho justify-content.
Ví Dụ 5 Về Grid Container
1. grid-template-columnsVới định nghĩa độ rộng cho cột, chúng ta có thể chỉ định độ rộng cho từng cột với thuộc tính grid-template-columns.
Chúng ta có thể định nghĩa 5 cột với CSS như dưới:
.grid-PTCha {
display: grid;
grid-template-columns: auto auto auto auto auto;
}
Với định nghĩa trên là auto auto auto auto auto thì chúng ta có 5 cột với độ rộng được chỉnh tự động phù hợp khung hình.
Bây giờ, chúng ta được định nghĩa cụ thể độ rộng các cột trong CSS. Với ví dụ là:
.grid-container {
display: inline-grid;
grid-template-columns: 600px 200px 100px 50px auto;
}
Ta có độ rộng cột một là 600px, cột 2 là 200px, độ rộng cột 3 là 100px, độ rộng cột 4 là 50px, độ rộng cột 5 là auto – tự động;
2. grid-template-rowsVới định nghĩa độ rộng cho hàng, chúng ta có thể chỉ định độ rộng cho từng hàng (ROW) với thuộc tính grid-template-rows.
Chúng ta có thể định nghĩa 3 hàng với CSS như dưới:
.grid-PTCha {
display: grid;
grid-template-rows: 500px 100px auto;
}
Với định nghĩa trên là 500px 100px auto thì chúng ta có 2 hàng với độ rộng được chỉnh là giá trị hàng thứ 1 là 500px, hàng thứ 2 100px, và độ rộng của hàng thứ 3 là tự động điều chỉnh.
3. justify-contentThuộc tính justify-content được sử dụng để căn chỉnh các phần tử Con trong khung chứa container Phần thử Cha PTCha.
3.1 justify-content: space-evenly.grid-container {
display: grid;
justify-content: space-evenly;
}
Với giá trị space-evenly sẽ sắp xếp các cột trong khung chứa đều nhau. Và quan trọng khoảng cách giữa các cột, và khoảng cách chung quanh chúng là bằng nhau.
Thuộc tính justify-content
Sử dụng justify-content căn chỉnh các phần tử của Khung chứa container (Phần Tử cha).
Giá Trị “space-evenly” sẽ cho các cột khoảng cách giữa các cột, tất cả xung quanh các cột là bằng nhau.
.grid-PTCha-TT {
display: grid;
justify-content: space-evenly;
grid-template-columns: 100px 100px 100px 10px;
gap: 10px;
background-color: blue;
padding: 10px;
}
.grid-PTCha-TT > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class=”grid-PTCha-TT”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
3.2 justify-content:space-aroundSử dụng thuộc tính justify-content sẽ căn chỉnh cho các phần tử trong container PTCha.
Chúng ta dùng giá trị ‘space-around’ sẽ cung cấp cho các cột khoảng cách chung quanh chúng bằng nhau.
Ví Dụ sử dụng :
Các thuộc tính sử dụng là justify-content: space-around;
Và grid-template-columns: 100px 100px 100px 55px;
Với thuộc tính grid-template-columns thì sẽ có 4 cột được định nghĩa cho layout với độ rộng lần lượt là Cột1 : 100px và cột 2 : 100px và cột 3 : 100px và cột 4 : 55px
Với thuộc tính justify-content : space-around thì các cột có khoảng cách chung quanh chúng bằng nhau.
Xem kết quả hiển thị >
.grid-PTCha-TT {
display: grid;
justify-content: space-around;
grid-template-columns: 100px 100px 100px 55px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-TT > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
3.3 justify-content : space-betweenSử dụng thuộc tính justify-content sẽ căn chỉnh cho các phần tử trong container PTCha.
Giá trị “space-between” sẽ cung cấp các cột có khoảng cách giữa các cột là bằng nhau.
Ví Dụ sử dụng :
Các thuộc tính sử dụng là justify-content: space-between;
Và grid-template-columns: 50px 50px 50px;
Với thuộc tính grid-template-columns thì sẽ có 3 cột được định nghĩa cho layout với độ rộng lần lượt là Cột1 : 50px và cột 2 : 50px và cột 3 : 50px
Với thuộc tính justify-content: space-between thì các cột có khoảng cách giữa các cột là bằng nhau.
Xem kết quả hiển thị >
Giá trị “space-between” sẽ cung cấp các cột có khoảng cách giữa các cột là bằng nhau.
.grid-PTCha-TT-01 {
display: grid;
justify-content: space-between;
grid-template-columns: 50px 50px 50px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-TT-01 > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class=”grid-PTCha-TT-01″>
<div>1</div>
<div>2</div>
<div>1</div>
<div>2</div>
<div>1</div>
<div>2</div>
</div>
3.4 justify-content : center
Sử dụng thuộc tính justify-content sẽ căn chỉnh cho các phần tử trong container PTCha.
Giá trị ‘center’ sẽ căn chỉnh cho các phần tử của lưới vào giữa của khung container PTCha.
Cũng tương tự căn chỉnh với các dạng văn bản hiển thị của chữ viết.
Ví Dụ sử dụng :
Các thuộc tính sử dụng là justify-content: center;
Và grid-template-columns: 50px 50px;
Với thuộc tính grid-template-columns thì sẽ có 2 cột được định nghĩa cho layout với độ rộng lần lượt là Cột1 : 50px và cột 2 : 50px
Với thuộc tính justify-content: center thì các cột của lưới sẽ căn vào giữa của khung container PTCha.
Xem kết quả hiển thị >
.grid-PTCha-TT-center {
display: grid;
justify-content: center;
grid-template-columns: 50px 50px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-PTCha-TT-center > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class=”grid-PTCha-TT-center”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
3.5 justify-content : start
Sử dụng thuộc tính justify-content sẽ căn chỉnh cho các phần tử trong container PTCha.
Giá trị “start” sẽ căn chỉnh cho các phần tử của khung lưới tại vị trí bắt đầu của khung chứa container PTCha.
Cũng tương tự căn chỉnh với các dạng văn bản hiển thị của chữ viết.
Ví Dụ sử dụng :
Các thuộc tính sử dụng là justify-content: start;
Và grid-template-columns: 50px 50px 50px;
Với thuộc tính grid-template-columns thì sẽ có 3 cột được định nghĩa cho layout với độ rộng lần lượt là Cột1 : 50px và cột 2 : 50px và cột 3 : 50px
Với thuộc tính justify-content: start; thì các cột sẽ được căn chỉnh tại vị trí bắt đầu của khung chứa container PTCha.
Xem kết quả hiển thị >
.grid-container-start {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container-start > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Giá trị “start” sẽ căn chỉnh cho các phần tử của khung lưới tại vị trí bắt đầu của khung chứa container PTCha.
<div class=”grid-container-start”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
3.6 justify-content : end
Sử dụng thuộc tính justify-content sẽ căn chỉnh cho các phần tử trong container PTCha.
Giá trị ‘end’ sẽ căn chỉnh các grid tại vị trí cuối của khung chứa container PTCha.
Ví Dụ sử dụng :
Các thuộc tính sử dụng là justify-content: end;
Và grid-template-columns: 50px 50px 50px;
Với thuộc tính grid-template-columns thì sẽ có 3 cột được định nghĩa cho layout với độ rộng lần lượt là Cột1 : 50px và cột 2 : 50px và cột 3 : 50px
Với thuộc tính justify-content: end; thì các cột sẽ được căn chỉnh tại vị trí cuối của khung chứa container PTCha.
Xem kết quả hiển thị >
.grid-container-end {
display: grid;
justify-content: end;
grid-template-columns: 50px 50px 50px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container-end > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
Giá trị ‘end’ sẽ căn chỉnh các grid tại vị trí cuối của khung chứa container PTCha.
<div class=”grid-container-end”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Phần justify-content giúp các phần tử của Grid được căn chỉnh theo các giá trị :
justify-content: space-evenlyjustify-content:space-aroundjustify-content : space-betweenjustify-content : center
justify-content : start
justify-content : end
Là phần giúp gridlayout hiển thị tốt hơn. Chúc các bạn thành công.
