ViệtCSS Grid Container là nền tảng của CSS Grid Layout, cho phép bạn tạo ra bố cục hai chiều, sắp xếp và căn chỉnh các phần tử trong một lưới bằng cách sử dụng các thuộc tính mạnh mẽ của CSS. Khi một phần tử được đặt thành Grid Container với display: grid, các phần tử con của nó sẽ tự động trở thành Grid Item và có thể được sắp xếp linh hoạt theo các hàng và cột.
Bài viết này là một phần của chuỗi học CSS trên CodeTutHub, cùng với các chủ đề như CSS Flexbox, CSS Grid Layout Module, và Responsive Web Design.
1. Thiết lập CSS Grid Container
Để biến một phần tử thành Grid Container, bạn cần thêm thuộc tính display: grid. Sau khi được thiết lập, các phần tử con của nó sẽ trở thành các Grid Item, và bạn có thể sử dụng các thuộc tính grid để điều chỉnh bố cục.
Ví dụ thiết lập CSS Grid Container
.container {
display: grid;
}Khi .container có display: grid, các phần tử con bên trong sẽ tự động được sắp xếp trên một lưới.
2. Các thuộc tính của CSS Grid Container
2.1 grid-template-columns và grid-template-rows
grid-template-columns và grid-template-rows xác định số lượng và kích thước của các cột và hàng trong Grid Container.
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 100px 1fr;
}Trong ví dụ này:
grid-template-columnsthiết lập ba cột: cột đầu và cuối rộng 200px, cột giữa chiếm phần còn lại.grid-template-rowsthiết lập hai hàng: hàng đầu cao 100px và hàng sau chiếm phần không gian còn lại.
2.2 repeat() và fr Unit
repeat() cho phép tạo ra nhiều cột hoặc hàng với cùng kích thước một cách ngắn gọn. Đơn vị fr (fraction) phân chia không gian theo tỷ lệ.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Ba cột bằng nhau */
}Trong ví dụ trên, container có ba cột bằng nhau, mỗi cột chiếm một phần không gian của container.
2.3 gap (hoặc grid-gap)
gap xác định khoảng cách giữa các hàng và cột trong Grid Container.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}Ở đây, khoảng cách giữa các cột và hàng là 20px.
2.4 justify-items và align-items
justify-items và align-items giúp căn chỉnh các Grid Item bên trong Grid Container theo chiều ngang và dọc.
justify-items: Căn chỉnh các Grid Item theo chiều ngang.align-items: Căn chỉnh các Grid Item theo chiều dọc.
.container {
display: grid;
justify-items: center;
align-items: center;
}Trong ví dụ này, các phần tử bên trong container được căn giữa theo cả hai chiều.
2.5 justify-content và align-content
justify-content và align-content căn chỉnh toàn bộ lưới trong Grid Container khi lưới không chiếm hết không gian.
.container {
display: grid;
justify-content: center;
align-content: start;
}Ở đây:
justify-content: centercăn chỉnh lưới ở giữa theo chiều ngang.align-content: startcăn chỉnh lưới ở đầu container theo chiều dọc.
3. Các thuộc tính tạo khoảng trống và giãn nở
3.1 grid-auto-rows và grid-auto-columns
grid-auto-rows và grid-auto-columns xác định kích thước của các hàng hoặc cột tự động được thêm vào khi Grid Item vượt quá số hàng hoặc cột được thiết lập.
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-auto-rows: 100px;
}Trong ví dụ này, mỗi hàng tự động thêm vào sẽ có chiều cao 100px.
3.2 grid-auto-flow
grid-auto-flow kiểm soát cách các Grid Item được thêm vào lưới, theo hàng hoặc theo cột.
row(mặc định): Sắp xếp Grid Item theo hàng.column: Sắp xếp Grid Item theo cột.
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-flow: column;
}Ở đây, các Grid Item sẽ được sắp xếp lần lượt vào các cột thay vì hàng.
4. Ví dụ sử dụng CSS Grid Container trong thiết kế thực tế
4.1 Bố cục trang web cơ bản
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
}
.header {
grid-column: 1 / -1;
}
.sidebar {
grid-column: 1 / 2;
}
.content {
grid-column: 2 / -1;
}
.footer {
grid-column: 1 / -1;
}Trong ví dụ này:
.headervà.footerchiếm toàn bộ chiều rộng..sidebarở phía bên trái, và.contentchiếm phần còn lại bên phải.
4.2 Bố cục lưới sản phẩm
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}Trong ví dụ này:
.product-gridtự động thêm các cột cho các sản phẩm với chiều rộng tối thiểu 200px và tự động điều chỉnh khi không gian thay đổi.
5. Kết hợp Grid Container với Media Queries
CSS Grid kết hợp với Media Queries để tạo ra bố cục responsive một cách dễ dàng.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Máy tính bảng */
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
/* Điện thoại di động */
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}Trong ví dụ này:
- Trên màn hình lớn,
.containercó ba cột. - Trên máy tính bảng,
.containercó hai cột. - Trên điện thoại di động,
.containerchuyển thành một cột để phù hợp với kích thước màn hình nhỏ.
6. Lưu ý khi sử dụng CSS Grid Container
- Kết hợp với Flexbox: CSS Grid phù hợp cho bố cục hai chiều, còn Flexbox lý tưởng cho bố cục một chiều. Kết hợp cả hai giúp bạn tạo ra các bố cục phức tạp và linh hoạt.
- Sử dụng
frvàauto: Sử dụngfrgiúp bạn tối ưu hóa không gian khi tạo các cột hoặc hàng.autohữu ích khi bạn cần các phần tử tự điều chỉnh kích thước. - Tránh sử dụng quá nhiều grid-template-areas: Sử dụng
grid-template-areaskhi có bố cục cố định, còn với bố cục linh hoạt, nên sử dụnggrid-template-columnsvàgrid-template-rowsvớigrid-columnvàgrid-row.
7. Kết luận
CSS Grid Container là một công cụ tuyệt vời để tạo ra các bố cục hai chiều linh hoạt và tinh tế. Với khả năng điều chỉnh hàng, cột, và khoảng cách dễ dàng, bạn có thể xây dựng các giao diện phức tạp và responsive cho trang web của mình. Để tìm hiểu thêm về các kỹ thuật bố cục CSS nâng cao, hãy tham khảo các bài viết khác trên CodeTutHub như CSS Flexbox, Responsive Web Design, và CSS Grid Layout Module.
