CSS Grid là gì ? Cách sử dụng Grid trong CSS

Posted by Lập Trình Viên CSS 10 phút đọc

CSS Grid layout là một công cụ thiết kế web hiệu quả, giúp chia trang thành các vùng quan trọng. Nó định nghĩa mối quan hệ giữa các phần của một điều khiển được xây dựng từ nguyên tố HTML theo lớp, vị trí và kích thước. Thuộc tính Grid mang lại hệ thống bố trí dựa trên lưới có hàng và cột. Với CSS Grid, việc thiết kế các trang web trở nên dễ dàng hơn mà không cần phải sử dụng positioning hay floating. Tương tự như bảng, nó cho phép người dùng sắp xếp các phần tử thành hàng và cột. Tuy nhiên, so với bảng, việc thiết kế bố cục trên CSS Grid dễ dàng hơn. Chúng ta có thể định nghĩa hàng và cột trên lưới bằng cách sử dụng thuộc tính grid-template-rows và grid-template-columns. Thuộc tính CSS grid được hỗ trợ trên các trình duyệt như Google Chrome, Internet Explorer, Firefox, Safari và Opera.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

Tổng quan CSS Grid là gì

CSS Grid là một phương tiện để xây dựng bố cục (layout) của website với định hướng theo lưới (grid). Nó cho phép bạn xác định các hàng và cột, điều chỉnh các khoảng trống và vị trí của các phần tử, qua đó giúp tạo ra một thiết kế web chuyên nghiệp và hiệu quả. Với CSS Grid, người dùng có thể sắp xếp các phần tử của trang web của mình một cách dễ dàng hơn.

CSS Grid layout cho phép ta xây dựng bố cục website theo lưới, giúp người dùng dễ dàng sắp xếp các phần tử một cách chính xác và linh hoạt. Nó cho phép sử dụng các thuộc tính để định nghĩa số hàng và số cột, điều chỉnh chiều rộng và chiều cao của các phần tử trong lưới, cũng như canh chỉnh khoảng trống giữa các phần tử.

Hướng dẫn CSS Grid

Để sử dụng CSS Grid layout, bạn cần phải tạo một lưới với các hàng và cột. Bạn có thể sử dụng thuộc tính ‘display: grid’ để tạo ra lưới và sử dụng các thuộc tính khác để thiết lập kích thước và vị trí của các phần tử trong lưới. Ngoài ra, bạn cũng có thể sử dụng các bộ thuộc tính rút gọn để tạo ra các lưới phức tạp một cách dễ dàng hơn.

Dưới đây là một số ví dụ về cách sử dụng CSS Grid:

Tạo các bố cục lưới cơ bản

CSS Grid có thể được sử dụng để tạo các bố cục lưới cơ bản bao gồm các hàng và cột.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Grid để tạo một bố cục lưới cơ bản:

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

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
}

Trong ví dụ này, một bố cục lưới cơ bản được tạo bằng cách sử dụng CSS Grid. Bố cục lưới bao gồm ba hàng và mỗi hàng có một cột.

Tạo các bố cục lưới tùy chỉnh

CSS Grid cũng có thể được sử dụng để tạo các bố cục lưới tùy chỉnh với các kích thước và vị trí khác nhau.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS Grid để tạo một bố cục lưới tùy chỉnh:

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

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 2fr;
}

.grid-item-1 {
  background-color: #ccc;
  padding: 10px;
}

.grid-item-2 {
  background-color: #fff;
  padding: 10px;
}

.grid-item-3 {
  background-color: #000;
  padding: 10px;
}

Trong ví dụ này, một bố cục lưới tùy chỉnh được tạo bằng cách sử dụng CSS Grid. Bố cục lưới bao gồm ba hàng và mỗi hàng có một cột. Hàng đầu tiên có chiều cao gấp đôi hàng thứ hai và thứ ba.

Ví dụ một bố cụ cụ thể

<!DOCTYPE html> 
<html> 
  
<head> 

    <style> 
        .main { 
            display: grid; 
            grid: auto auto / auto auto auto auto; 
            grid-gap: 10px; 
            background-color: black; 
            padding: 10px; 
        } 
          
        .num { 
            background-color: grey; 
            text-align: center; 
            color: white;
            padding: 10px 10px; 
            font-size: 30px; 
        } 
    </style> 
</head> 
  
<body>   
    <div class="main"> 
        <div class="num">One</div> 
        <div class="num">Two</div> 
        <div class="num">Three</div> 	
        <div class="num">Four</div> 
        <div class="num">Five</div> 
        <div class="num">Six</div> 
        <div class="num">Seven</div> 
        <div class="num">Eight</div> 
    </div> 
  
</body> 
  
</html>

Kết Quả:

CSS Grid

Ưu và Nhược điểm CSS Grid

Ưu điểm của CSS Grid

  • Thiết kế web linh hoạt và đa dạng.
  • Thiết kế dễ dàng và nhanh chóng.
  • Giảm thiểu sự phụ thuộc vào JavaScript hoặc các thư viện JS bên thứ ba.
  • Các trình duyệt hiện đại hỗ trợ tốt.
  • Dễ dàng tùy chỉnh và điều chỉnh.
  • Hiệu quả và tiết kiệm thời gian.

Nhược điểm của CSS Grid

  • Một số trình duyệt c hưa hỗ trợ đầy đủ các tính năng của CSS Grid.
  • Việc học và sử dụng CSS Grid có thể khó khăn với những người mới bắt đầu.

Lời khuyên CSS Grid

Trong quá trình sử dụng CSS Grid layout, bạn có thể gặp phải một số vấn đề. Để giúp bạn tiết kiệm thời gian và tạo ra một thiết kế web chuyên nghiệp, chúng tôi có một số lời khuyên sau đây:

  1. Nên bắt đầu với các ví dụ đơn giản trước khi đi vào các thiết kế phức tạp.
  2. Sử dụng các bộ thuộc tính rút gọn để tạo ra các lưới phức tạp một cách dễ dàng hơn.
  3. Cẩn thận khi sử dụng thuộc tính ‘grid-auto-flow’.
  4. Kiểm tra kỹ tính năng hỗ trợ của trình duyệt trước khi sử dụng CSS Grid.
  5. Không sử dụng CSS Grid cho các trang web cũ hoặc không có tính linh hoạt.

Kết luận

Trên đây là một số thông tin cơ bản về CSS Grid layout. Với những lợi ích và tính năng đa dạng của CSS Grid, chúng ta có thể dễ dàng thiết kế web chuyên nghiệp và hiệu quả. Nếu bạn đang muốn tìm hiểu thêm về CSS Grid, hãy bắt đầu với các ví dụ đơn giản trước khi đi vào các thiết kế phức tạp. 

1. CSS Grid là gì?

CSS Grid layout là một công cụ thiết kế web hiệu quả, giúp chia trang thành các vùng quan trọng.

2. CSS Grid có những ưu điểm gì?

CSS Grid layout giúp thiết kế web linh hoạt và đa dạng, dễ dàng tùy chỉnh và hiệu quả. Nó cũng giảm thiểu sự phụ thuộc vào JavaScript hoặc các thư viện JS bên thứ ba.

3. Các trình duyệt nào hỗ trợ CSS Grid?

CSS Grid được hỗ trợ trên các trình duyệt như Google Chrome, Internet Explorer, Firefox, Safari và Opera.

4. Tại sao nên sử dụng CSS Grid cho thiết kế web?

CSS Grid giúp bạn tạo ra một thiết kế web chuyên nghiệp và hiệu quả, giảm thiểu sự phụ thuộc vào JavaScript hoặc các thư viện JS bên thứ ba.

5. Làm thế nào để sử dụng CSS Grid?

Bạn có thể sử dụng thuộc tính ‘display: grid’ để tạo ra lưới và sử dụng các thuộc tính khác để thiết lập kích thước và vị trí của các phần tử trong lưới.