Cách sử dụng grid - Xây dựng bố cục lưới với CSS Grid

CSS Grid là một công cụ mạnh mẽ giúp bạn thiết kế và tổ chức các thành phần trên trang web một cách trực quan và hiệu quả. Bố cục lưới giúp chia sẻ không gian màn hình một cách đều đặn và linh hoạt. Dưới đây là hướng dẫn chi tiết về cách sử dụng CSS Grid để xây dựng bố cục lưới đẹp và chức năng.

Khởi tạo CSS Grid

Để bắt đầu, bạn cần chọn một phần tử HTML để làm container lưới. Sau đó, bạn sẽ áp dụng thuộc tính display: grid; vào phần tử đó.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

Trong CSS, bạn sẽ định nghĩa container này:

.grid-container {
  display: grid;
}

Thiết lập hàng và cột

CSS Grid cho phép bạn định nghĩa số lượng hàng và cột, cũng như kích thước của chúng. Sử dụng các thuộc tính như grid-template-columns và grid-template-rows:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 cột, mỗi cột chiếm 1 phần tư không gian */
  grid-template-rows: 100px 200px; /* Hàng đầu 100px, hàng thứ hai 200px */
}

Sử dụng đơn vị fr để chia không gian linh hoạt, hoặc sử dụng các đơn vị cố định như px, em, %.

Khoảng cách giữa các ô

Để thêm khoảng cách (khoảng cách giữa các hàng và cột), bạn có thể sử dụng các thuộc tính grid-gap, grid-row-gap, và grid-column-gap:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px; /* Khoảng cách giữa các ô */
}

Đặt các đối tượng vào ô lưới

Mỗi phần tử trong container lưới có thể được đặt vào một hoặc nhiều ô lưới bằng cách sử dụng các thuộc tính như grid-column và grid-row:

.grid-item:nth-child(1) {
  grid-column: 1 / 3; /* Chiếm từ cột 1 đến cột 2 */
  grid-row: 1; /* Chiếm dòng 1 */
}
.grid-item:nth-child(2) {
  grid-column: 3 / 5; /* Chiếm từ cột 3 đến cột 4 */
  grid-row: 1; /* Chiếm dòng 1 */
}

Tự động bố trí

CSS Grid cho phép bạn tự động bố trí các mục bằng cách sử dụng auto-placement. Sử dụng grid-auto-rows hoặc grid-auto-columns để quy định kích thước của các hàng hoặc cột tự động được tạo.

.grid-container {
  display: grid;
  grid-auto-rows: 150px; /* Các hàng sẽ tự động có chiều cao 150px */
}

Tạo bố cục phức tạp

Khi bạn muốn tạo ra các bố cục lưới phức tạp hơn, bạn có thể sử dụng nhiều container lưới lồng nhau, hoặc kết hợp CSS Grid với các công cụ bố cục khác như Flexbox.

<div class="outer-grid-container">
  <div class="grid-container-1">
    <!-- Các mục lưới -->
  </div>
  <div class="grid-container-2">
    <!-- Các mục lưới -->
  </div>
</div>

Ghi chú

• Responsive Design: CSS Grid rất linh hoạt và dễ dàng điều chỉnh theo kích thước màn hình khác nhau với media queries.
• Compatibility: Hầu hết các trình duyệt hiện đại đã hỗ trợ CSS Grid, nhưng bạn vẫn nên kiểm tra tính tương thích trên các trình duyệt cụ thể.

CSS Grid cung cấp một cách tiếp cận mạnh mẽ và linh hoạt để thiết kế bố cục trên web. Với một chút thực hành, bạn sẽ dễ dàng tạo ra các trang web với bố cục đẹp mắt và nhất quán.