CSS Grid Item là các phần tử bên trong Grid Container. Mỗi Grid Item có thể được sắp xếp, căn chỉnh và tùy chỉnh kích thước một cách linh hoạt, cho phép bạn kiểm soát bố cục của các phần tử trong lưới. CSS Grid cung cấp nhiều thuộc tính để định vị và tùy chỉnh các Grid Item, giúp bạn tạo ra các bố cục từ đơn giản đến phức tạp.

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 Grid Container, CSS Flexbox, và Responsive Web Design.

1. Tổng quan về CSS Grid Item

Grid Item là các phần tử con của một Grid Container, và chúng tự động được sắp xếp vào một lưới khi container có display: grid. Bằng cách sử dụng các thuộc tính như grid-column, grid-row, và align-self, bạn có thể kiểm soát cách Grid Item xuất hiện trong Grid Container.

css
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.item {
    background-color: #3498db;
    padding: 20px;
    color: #fff;
}

Trong ví dụ trên, mỗi .item sẽ tự động được sắp xếp vào ba cột của .container.

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

2.1 grid-column và grid-row

grid-column và grid-row cho phép bạn xác định vị trí và kích thước của Grid Item theo số cột hoặc hàng mà nó chiếm.

  • grid-column: Xác định vị trí và số cột mà Grid Item chiếm.
  • grid-row: Xác định vị trí và số hàng mà Grid Item 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 */
}

Trong ví dụ này:

  • .item1 chiếm hai cột từ cột 1 đến cột 3.
  • .item1 chỉ chiếm một hàng từ hàng 1 đến hàng 2.

2.2 grid-column-start, grid-column-end, grid-row-start, và grid-row-end

Bạn có thể kiểm soát vị trí bắt đầu và kết thúc của Grid Item bằng cách sử dụng grid-column-start, grid-column-end, grid-row-start, và grid-row-end.

css
.item2 {
    grid-column-start: 2;
    grid-column-end: 4;
}

Ở đây, .item2 sẽ bắt đầu từ cột 2 và kết thúc ở cột 4, chiếm hai cột trong Grid Container.

2.3 grid-area

grid-area là cách viết ngắn gọn cho grid-row và grid-column, giúp bạn xác định khu vực mà Grid Item sẽ chiếm một cách nhanh chóng.

css
.item3 {
    grid-area: 1 / 1 / 2 / 3;
}

Trong ví dụ này:

  • .item3 bắt đầu từ hàng 1 và kết thúc ở hàng 2, bắt đầu từ cột 1 và kết thúc ở cột 3.

3. Căn chỉnh Grid Item

3.1 align-self và justify-self

  • align-self: Căn chỉnh Grid Item theo chiều dọc trong khu vực mà nó chiếm.
  • justify-self: Căn chỉnh Grid Item theo chiều ngang trong khu vực mà nó chiếm.
css
.item4 {
    align-self: center; /* Căn giữa theo chiều dọc */
    justify-self: end; /* Căn phải theo chiều ngang */
}

Trong ví dụ này:

  • .item4 được căn giữa theo chiều dọc trong khu vực của nó.
  • .item4 được căn phải theo chiều ngang.

3.2 align-content và justify-content

  • align-content: Căn chỉnh toàn bộ nội dung của Grid Container theo chiều dọc.
  • justify-content: Căn chỉnh toàn bộ nội dung của Grid Container theo chiều ngang.

Các thuộc tính này hữu ích khi bạn muốn điều chỉnh toàn bộ bố cục của các Grid Item trong Grid Container.

css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: center; /* Căn giữa nội dung theo chiều dọc */
    justify-content: space-between; /* Khoảng cách đều theo chiều ngang */
}

4. Kích thước tự động của Grid Item

4.1 auto-fill và auto-fit

auto-fill và auto-fit là các giá trị hữu ích khi bạn muốn tạo các cột tự động để các Grid Item có thể mở rộng hoặc thu nhỏ theo kích thước của Grid Container.

css
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

Trong ví dụ này:

  • Các cột sẽ có chiều rộng tối thiểu là 200px và sẽ mở rộng khi có không gian trống.
  • auto-fill tự động lấp đầy các cột trong container với các Grid Item.

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

5.1 Tạo bố cục lưới sản phẩm

css
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.product-item {
    background-color: #f4f4f4;
    padding: 15px;
    border: 1px solid #ddd;
}

Trong ví dụ này:

  • .product-grid sử dụng auto-fit để tự động điều chỉnh số cột cho các sản phẩm.
  • Các sản phẩm .product-item có thể co giãn để phù hợp với không gian của container.

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

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:

  • .container được chia thành các khu vực header, sidebar, content, và footer theo cấu trúc lưới.
  • Mỗi phần tử .header, .sidebar, .content, và .footer được định vị trong các khu vực tương ứng.

6. Kết hợp CSS Grid Item với Media Queries

CSS Grid Item kết hợp với Media Queries để tạo ra các bố cục responsive dễ dàng.

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 giảm xuống còn hai cột.
  • Trên điện thoại di động, .container chuyển thành một cột để phù hợp với kích thước màn hình nhỏ.

7. Lưu ý khi sử dụng CSS Grid Item

  • Kết hợp với Flexbox: Sử dụng CSS Grid cho bố cục lớn và Flexbox cho bố cục nhỏ bên trong các Grid Item để tăng tính linh hoạt.
  • Tránh lạm dụng grid-template-areas: Sử dụng grid-template-areas khi bố cục cố định, còn với bố cục linh hoạt, nên dùng grid-column và grid-row.
  • Sử dụng minmax và fr: Tận dụng minmax và fr để tạo ra các lưới tự điều chỉnh, phù hợp với các thiết kế responsive.

8. Kết luận

CSS Grid Item mang lại khả năng tùy chỉnh và kiểm soát lớn, giúp bạn dễ dàng điều chỉnh vị trí và kích thước của các phần tử trong lưới. Bằng cách hiểu rõ các thuộc tính như grid-column, grid-row, align-self, và justify-self, bạn có thể tạo ra các bố cục tinh tế và dễ duy trì. Để tìm hiểu thêm về cách xây dựng các bố cục với CSS, hãy tham khảo các bài viết khác trên "codetuthub.com" như CSS Grid Container, CSS Flexbox, và Responsive Web Design.