Tìm hiểu Grid Layout trong CSS

CSS Grid Layout, hay còn gọi là CSS Grid, là một hệ thống bố cục dựa trên lưới hai chiều, cho phép các nhà phát triển web tạo ra các bố cục phức tạp một cách dễ dàng và nhất quán trên các trình duyệt. Trước khi CSS Grid xuất hiện, việc tạo bố cục cho trang web thường phụ thuộc vào các phương pháp như sử dụng bảng, float, hoặc Flexbox. Tuy nhiên, CSS Grid mang lại một cách tiếp cận mới mẻ và mạnh mẽ hơn, cho phép kiểm soát chính xác vị trí và kích thước của các phần tử trong cả hai chiều: hàng và cột

Khái Niệm Cơ Bản

CSS Grid Layout giới thiệu một hệ thống lưới hai chiều, trong đó bạn có thể xác định kích thước của các hàng và cột, cũng như vị trí của các phần tử trên lưới đó. Một số khái niệm cơ bản của CSS Grid bao gồm:

• Grid Container: Phần tử cha mà trên đó display: grid hoặc display: inline-grid được áp dụng. Tất cả các phần tử con trực tiếp trở thành các grid item
• Grid Item: Các phần tử con trực tiếp của grid container.
• Grid Line: Các đường chia cắt tạo nên cấu trúc của lưới, có thể là dọc (cột) hoặc ngang (hàng).
• Grid Track: Khoảng không gian giữa hai grid line liên tiếp, có thể hiểu là hàng hoặc cột của lưới.
• Grid Cell: Không gian giữa bốn grid line, tạo thành một ô trên lưới.
• Grid Area: Khu vực được bao quanh bởi bốn grid line, có thể chứa một hoặc nhiều grid cell

Tạo Grid Container

Để bắt đầu với CSS Grid, bạn cần xác định một grid container bằng cách sử dụng thuộc tính display với giá trị grid hoặc inline-grid.

.wrapper {
  display: grid;
}

Xác Định Kích Thước Của Hàng Và Cột

Sử dụng các thuộc tính grid-template-columns và grid-template-rows để xác định kích thước của các cột và hàng trong grid container.

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px auto 100px;
}

Trong ví dụ trên, container có ba cột với kích thước lần lượt là 100px, 200px, và tự động, cùng ba hàng với kích thước lần lượt là 50px, tự động, và 100px[2][14].

Đặt Các Phần Tử Trên Grid

Các phần tử con của grid container có thể được đặt trên lưới bằng cách sử dụng các thuộc tính grid-column và grid-row.

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.item2 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

Trong ví dụ này, item1 sẽ chiếm hai cột đầu tiên của hàng đầu tiên, trong khi item2 sẽ chiếm từ cột thứ hai đến cột cuối cùng và từ hàng thứ hai đến hàng cuối cùng[2][14].

Sử Dụng Grid Template Areas

Thuộc tính grid-template-areas cho phép bạn đặt tên cho các khu vực của grid và sau đó đặt các phần tử vào các khu vực đó bằng tên.

.wrapper {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Trong ví dụ này, grid được chia thành ba khu vực: header, sidebar, content, và footer. Mỗi phần tử được đặt vào khu vực tương ứng thông qua thuộc tính grid-area[2][14].

Kết Luận

CSS Grid Layout mang lại sự linh hoạt và kiểm soát chưa từng có trong việc tạo bố cục web. Với khả năng xác định kích thước và vị trí của các phần tử trong cả hai chiều, CSS Grid giúp các nhà phát triển web dễ dàng tạo ra các bố cục phức tạp mà không cần phụ thuộc vào các phương pháp hack hay workaround. Sự ra đời của CSS Grid đánh dấu một bước tiến quan trọng trong lịch sử phát triển web, mở ra những khả năng mới cho việc thiết kế giao diện người dùng