CSS Grid Layout Module là một công cụ mạnh mẽ giúp bạn tạo bố cục hai chiều (cả hàng ngang và cột dọc) trong CSS. CSS Grid cho phép bạn dễ dàng xây dựng bố cục phức tạp mà không cần sử dụng các kỹ thuật truyền thống như float hoặc flexbox. Với các thuộc tính phong phú, CSS Grid là lựa chọn lý tưởng để tạo ra các giao diện responsive và tinh tế.

Bài viết này là một phần của chuỗi học CSS trên "codetuthub.com", cùng với các chủ đề như CSS Flexbox, CSS Layouts, và Responsive Web Design.

1. Tổng quan về CSS Grid Layout

CSS Grid Layout dựa trên hệ thống grid container (container lưới) và grid item (phần tử lưới). Container lưới là phần tử chính chứa các phần tử con, và các phần tử con này được sắp xếp vào một lưới.

Cách thiết lập CSS Grid Layout

Để biến một phần tử thành grid container, bạn chỉ cần đặt display: grid vào phần tử đó.

css
.container {
    display: grid;
}

Sau khi container trở thành grid, các phần tử bên trong nó sẽ tự động trở thành các phần tử lưới (grid item) và có thể được sắp xếp bằng các thuộc tính grid.

2. Các thuộc tính chính của CSS Grid

2.1 grid-template-columns và grid-template-rows

grid-template-columns và grid-template-rows cho phép bạn xác định số lượng cột và hàng trong grid container và kích thước của chúng.

css
.container {
    display: grid;
    grid-template-columns: 200px 200px 200px; /* Ba cột, mỗi cột rộng 200px */
    grid-template-rows: 100px 100px; /* Hai hàng, mỗi hàng cao 100px */
}

Trong ví dụ này, .container có ba cột và hai hàng, tạo thành một lưới 3x2.

2.2 repeat()

repeat() là một cách viết ngắn gọn để tạo ra các hàng và cột có cùng kích thước, giúp giảm thiểu mã CSS.

css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ba cột, mỗi cột chiếm 1 phần không gian */
}

Ở đây, repeat(3, 1fr) tạo ba cột với mỗi cột chiếm một phần bằng nhau của chiều rộng container.

2.3 grid-gap (hoặc gap)

grid-gap hoặc gap tạo khoảng cách giữa các hàng và cột, giúp phần tử lưới dễ nhìn hơn.

css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Khoảng cách 20px giữa các phần tử */
}

2.4 fr unit

Đơn vị fr (fraction) được sử dụng để chia phần không gian còn lại của container. Đơn vị fr rất hữu ích khi tạo bố cục responsive.

css
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Ba cột: 1 phần, 2 phần, và 1 phần */
}

3. Căn chỉnh trong CSS Grid

3.1 justify-items và align-items

  • justify-items căn chỉnh các phần tử lưới theo chiều ngang.
  • align-items căn chỉnh các phần tử lưới theo chiều dọc.
css
.container {
    display: grid;
    justify-items: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
}

3.2 justify-content và align-content

  • justify-content căn chỉnh toàn bộ lưới theo chiều ngang.
  • align-content căn chỉnh toàn bộ lưới theo chiều dọc.
css
.container {
    display: grid;
    justify-content: center; /* Căn giữa toàn bộ lưới */
    align-content: space-around; /* Khoảng cách đều giữa các hàng */
}

4. Đặt vị trí cho các phần tử lưới

4.1 grid-column và grid-row

grid-column và grid-row cho phép bạn xác định vị trí và khoảng cách mà một phần tử lưới sẽ chiếm.

css
.item1 {
    grid-column: 1 / 3; /* Chiếm từ cột 1 đến cột 3 */
    grid-row: 1 / 2; /* Chiếm từ hàng 1 đến hàng 2 */
}

4.2 grid-area

grid-area là cách viết ngắn gọn của grid-row và grid-column, cho phép bạn xác định vị trí của một phần tử lưới trong một dòng duy nhất.

css
.item1 {
    grid-area: 1 / 1 / 2 / 3; /* Hàng 1 đến hàng 2, cột 1 đến cột 3 */
}

5. Sử dụng Grid Template Areas

grid-template-areas cho phép bạn đặt tên các phần tử và sắp xếp chúng theo một cấu trúc rõ ràng và dễ hiểu hơn.

css
.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

Trong ví dụ này:

  • grid-template-areas tạo bố cục trang với các khu vực header, sidebar, content, và footer.
  • Các phần tử .header, .sidebar, .content, và .footer được sắp xếp vào các khu vực tương ứng.

6. Tạo bố cục responsive với CSS Grid

CSS Grid rất mạnh mẽ khi kết hợp với Media Queries để tạo ra các bố cục responsive.

css
.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, .container có ba cột.
  • Trên máy tính bảng, .container có hai cột.
  • Trên điện thoại di động, .container chỉ có một cột để phù hợp với kích thước nhỏ.

7. So sánh CSS Grid và CSS Flexbox

Thuộc tínhCSS GridCSS Flexbox
Bố cụcBố cục hai chiều (hàng và cột)Bố cục một chiều (hàng hoặc cột)
Sử dụngPhù hợp với bố cục phức tạp như lưới trangPhù hợp với bố cục đơn giản, hàng hoặc cột
ResponsiveDễ dàng điều chỉnh với Media QueriesLinh hoạt nhưng hạn chế ở bố cục một chiều
Điều chỉnhKiểm soát vị trí từng phần tử dễ dàngCăn chỉnh hàng hoặc cột tốt hơn

CSS Grid và CSS Flexbox đều rất mạnh mẽ và có thể kết hợp để tạo ra các bố cục linh hoạt và nhất quán.

8. Ví dụ thực tế với CSS Grid

8.1 Bố cục lưới ảnh

css
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.gallery-item {
    background-color: #eee;
    padding: 20px;
}

Trong ví dụ này, .gallery sắp xếp các item thành lưới với ba cột và khoảng cách 10px giữa các phần tử.

8.2 Bố cục trang web với header, sidebar, và content

css
.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

Bố cục này chia trang thành ba khu vực chính: header, sidebar, và content, phù hợp cho bố cục trang web cơ bản.

9. Kết luận

CSS Grid Layout là một công cụ thiết kế bố cục rất mạnh mẽ, cung cấp khả năng tùy chỉnh và kiểm soát cao cho các nhà phát triển web. Bằng cách hiểu rõ cách sử dụng các thuộc tính của CSS Grid, bạn có thể tạo ra các giao diện phức tạp và đẹp mắt cho trang web của mình. Để tìm hiểu thêm về các kỹ thuật bố cục trong CSS, hãy xem các bài viết khác trên "codetuthub.com" như CSS Flexbox, Responsive Web Design, và CSS Layouts.