Vùng chứa lưới CSS
1
2
3
4
5
6
7
số 8
Thùng chứa lưới
Để làm cho phần tử HTML hoạt động như một vùng chứa lưới, bạn phải đặt thuộc tính display
grid
hoặc inline-grid
.
Các thùng chứa lưới bao gồm các mục lưới, được đặt bên trong các cột và hàng.
Thuộc tính Grid-template-columns
Thuộc tính grid-template-columns
xác định số lượng cột trong bố cục lưới của bạn và nó có thể xác định chiều rộng của mỗi cột.
Giá trị là một danh sách được phân tách bằng dấu cách, trong đó mỗi giá trị xác định độ rộng của cột tương ứng.
Nếu bạn muốn bố cục lưới chứa 4 cột, hãy chỉ định chiều rộng của 4 cột hoặc "tự động" nếu tất cả các cột phải có cùng chiều rộng.
Ví dụ
Tạo lưới có 4 cột:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Lưu ý: Nếu bạn có nhiều hơn 4 mục trong lưới 4 cột, lưới sẽ tự động thêm hàng mới để đưa các mục vào.
Thuộc tính grid-template-columns
cũng có thể được sử dụng để chỉ định kích thước (chiều rộng) của các cột.
Ví dụ
Đặt kích thước cho 4 cột:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Thuộc tính Grid-template-rows
Thuộc tính grid-template-rows
xác định chiều cao của mỗi hàng.
1
2
3
4
5
6
7
số 8
Giá trị là một danh sách được phân tách bằng dấu cách, trong đó mỗi giá trị xác định chiều cao của hàng tương ứng:
Thuộc tính biện minh cho nội dung
Thuộc tính justify-content
được sử dụng để căn chỉnh toàn bộ lưới bên trong vùng chứa.
1
2
3
4
5
6
Lưu ý: Tổng chiều rộng của lưới phải nhỏ hơn chiều rộng của vùng chứa để thuộc tính justify-content
có hiệu lực.
Thuộc tính căn chỉnh nội dung
Thuộc tính align-content
được sử dụng để căn chỉnh theo chiều dọc toàn bộ lưới bên trong vùng chứa.
1
2
3
4
5
6
Lưu ý: Tổng chiều cao của lưới phải nhỏ hơn chiều cao của vùng chứa để thuộc tính align-content
có hiệu lực.
Ví dụ
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Ví dụ
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Ví dụ
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}