Vùng chứa lưới CSS
1
2
3
4
5
6
7
số 8
Vùng chứa lưới
Để làm cho một phần tử HTML hoạt động như một vùng chứa lưới, bạn phải đặt thuộc displaytính thành
gridhoặc inline-grid.
Vù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 lưới-mẫu-cột
Thuộc grid-template-columnstính 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 chiều rộng của cột tương ứng.
Nếu bạn muốn bố cục lưới của mình 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.
Thí 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 một hàng mới để đưa các mục vào.
Thuộc grid-template-columnstính cũng có thể được sử dụng để chỉ định kích thước (chiều rộng) của các cột.
Thí 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 lưới-mẫu-hàng
Thuộc grid-template-rowstính 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:
Thí dụ
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Thuộc tính justify-content
Thuộc justify-contenttính đượ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 justify-contenttính có hiệu lực.
Thí dụ
.grid-container {
display: grid;
justify-content: space-evenly;
}
Thí dụ
.grid-container {
display: grid;
justify-content: space-around;
}
Thí dụ
.grid-container {
display: grid;
justify-content: space-between;
}
Thí dụ
.grid-container {
display: grid;
justify-content: center;
}
Thí dụ
.grid-container {
display: grid;
justify-content: start;
}
Thí dụ
.grid-container {
display: grid;
justify-content: end;
}
Thuộc tính align-content
Thuộc align-contenttính đượ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 align-contenttính có hiệu lực.
Thí dụ
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Thí dụ
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Thí dụ
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Thí dụ
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Thí dụ
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Thí dụ
.grid-container {
display: grid;
height: 400px;
align-content: end;
}