CSS Grid Layout là gì? Hướng dẫn toàn tập cho người mới bắt đầu

Bạn đã từng đau đầu với việc sắp xếp bố cục website bằng float hay position? CSS Grid Layout chính là vị cứu tinh mà bạn đang tìm kiếm. Đây là một hệ thống layout hai chiều mạnh mẽ, giúp bạn xây dựng các giao diện phức tạp một cách dễ dàng và trực quan. Bài viết này sẽ là một cuốn cẩm nang toàn tập, hướng dẫn bạn từ những khái niệm cơ bản nhất đến các ví dụ thực tế, giúp bạn nhanh chóng làm chủ công cụ tuyệt vời này.

CSS Grid Layout là gì?

CSS Grid Layout, hay gọi tắt là Grid, là một hệ thống bố cục dựa trên lưới hai chiều (2D). Nó cho phép chúng ta sắp xếp nội dung vào các hàng (rows) và cột (columns). Hãy tưởng tượng nó như một bảng tính Excel, nơi bạn có toàn quyền kiểm soát vị trí và kích thước của từng ô. Trước khi có Grid, các lập trình viên thường phải dùng đến các kỹ thuật như float, position, hay table để dàn trang. Các cách này thường phức tạp, khó bảo trì và dễ gây ra lỗi hiển thị.

Các khái niệm cốt lõi của CSS Grid bạn cần nắm vững

Để bắt đầu học CSS Grid, việc nắm vững các thuật ngữ cơ bản là cực kỳ quan trọng. Chúng giống như những viên gạch nền tảng giúp bạn xây dựng nên những công trình vững chắc. Đừng lo lắng, chúng khá trực quan đấy!

• Grid Container: Đây là phần tử cha chứa tất cả các phần tử con bên trong. Bạn chỉ cần khai báo display: grid; cho một phần tử, nó sẽ ngay lập tức trở thành một Grid Container.
• Grid Item: Là các phần tử con trực tiếp của Grid Container. Mọi phần tử bên trong container đều là một item.
• Grid Line: Là những đường kẻ ngang và dọc phân chia lưới. Chúng giống như dòng kẻ trong một cuốn tập. Các đường kẻ này được đánh số thứ tự bắt đầu từ 1.
• Grid Track: Là không gian giữa hai Grid Line liền kề. Chúng ta có hai loại track: track cột (column track) và track hàng (row track).
• Grid Cell: Là đơn vị nhỏ nhất trong lưới, được tạo ra bởi giao điểm của một hàng và một cột. Nó giống như một ô trong bảng tính vậy.
• Grid Area: Là một không gian hình chữ nhật được tạo thành từ một hoặc nhiều Grid Cell. Bạn có thể gộp nhiều ô lại để tạo thành một khu vực lớn hơn cho một phần tử cụ thể.

Việc hiểu rõ các khái niệm này sẽ giúp bạn đọc hiểu tài liệu và áp dụng các thuộc tính CSS Grid một cách chính xác. Thấy không, cũng không quá phức tạp phải không nào?

Khi nào nên dùng CSS Grid và Flexbox

Đây là câu hỏi kinh điển: CSS Grid vs Flexbox, nên chọn cái nào? Cả hai đều là những công cụ layout tuyệt vời, nhưng chúng được sinh ra để giải quyết những vấn đề khác nhau. Việc hiểu rõ sự khác biệt sẽ giúp bạn lựa chọn công cụ phù hợp cho từng tác vụ.

Flexbox được thiết kế cho bố cục một chiều (1D). Điều này có nghĩa là nó rất giỏi trong việc sắp xếp các phần tử theo một hàng hoặc một cột. Nó hoàn hảo cho việc căn chỉnh các mục trong một thanh điều hướng, một danh sách sản phẩm, hay căn giữa một phần tử theo cả chiều ngang và dọc.

Trong khi đó, CSS Grid Layout được sinh ra cho bố cục hai chiều (2D). Nó cho phép bạn kiểm soát đồng thời cả hàng và cột. Khi bạn cần xây dựng toàn bộ bố cục trang web, với header, footer, sidebar, và vùng nội dung chính, Grid là lựa chọn không thể tốt hơn. Nó xử lý các mối quan hệ không gian phức tạp một cách dễ dàng.

Vậy quy tắc chung là gì?

• Dùng Flexbox khi: Bạn cần sắp xếp các phần tử theo một đường thẳng (hàng hoặc cột). Ví dụ: menu, các thẻ (tags), các nút bấm.
• Dùng Grid khi: Bạn cần xây dựng bố cục tổng thể của trang hoặc một thành phần phức tạp có cả hàng và cột. Ví dụ: layout trang chủ, thư viện hình ảnh, lịch.

Thực tế, cách tốt nhất là kết hợp cả hai. Bạn có thể dùng Grid để tạo bố cục chính cho trang, và sau đó dùng Flexbox để sắp xếp các phần tử bên trong mỗi Grid Item. Bạn nghĩ sao về sự kết hợp này?

Các thuộc tính cơ bản cho Grid Container

Để tạo ra một lưới, trước tiên bạn cần biến một phần tử thành Grid Container. Sau đó, bạn sử dụng các thuộc tính để định hình cấu trúc lưới đó. Dưới đây là những thuộc tính CSS Grid quan trọng nhất dành cho container.

• display: grid; hoặc display: inline-grid;: Đây là thuộc tính khởi đầu, biến một phần tử HTML thành vùng chứa lưới.
• grid-template-columns: Thuộc tính này định nghĩa số lượng và chiều rộng của các cột trong lưới. Đây là một trong những thuộc tính mạnh mẽ nhất. Bạn có thể sử dụng các đơn vị như px, %, auto, hoặc đơn vị mới là fr (fraction – phần). Ví dụ: grid-template-columns: 200px 1fr 2fr; sẽ tạo ra 3 cột. Cột đầu tiên rộng 200px, cột thứ hai và ba sẽ chia không gian còn lại theo tỷ lệ 1:2.
• grid-template-rows: Tương tự như trên, nhưng thuộc tính này dùng để định nghĩa số lượng và chiều cao của các hàng.
• gap (hoặc grid-gap): Thuộc tính này thiết lập khoảng trống giữa các hàng và các cột. Nó là cách viết tắt cho row-gap và column-gap. Ví dụ: gap: 20px; sẽ tạo ra khoảng trống 20px giữa tất cả các hàng và cột. Thật tiện lợi phải không?

Chỉ với vài thuộc tính này, bạn đã có thể tạo ra vô số bố cục Grid CSS khác nhau. Hãy thử nghiệm với các giá trị khác nhau của grid-template-columns và grid-template-rows để cảm nhận sức mạnh của chúng nhé!

Các thuộc tính quan trọng cho Grid Items

Sau khi đã có một khung lưới vững chắc từ Grid Container, giờ là lúc sắp xếp các Grid Items vào đúng vị trí của chúng. Các thuộc tính sau đây sẽ cho phép bạn kiểm soát vị trí và kích thước của từng phần tử con.

• grid-column-start, grid-column-end: Xác định vị trí bắt đầu và kết thúc của một item trên trục cột. Ví dụ, grid-column-start: 1; grid-column-end: 3; sẽ làm cho item kéo dài từ đường kẻ cột 1 đến đường kẻ cột 3.
• grid-row-start, grid-row-end: Tương tự như trên, nhưng áp dụng cho trục hàng.
• grid-column, grid-row: Đây là các thuộc tính viết tắt. Ví dụ: grid-column: 1 / 3; tương đương với hai thuộc tính ở trên. Dấu gạch chéo phân tách giá trị bắt đầu và kết thúc.
• grid-area: Một cách viết tắt mạnh mẽ hơn nữa. Nó cho phép bạn thiết lập cả bốn giá trị grid-row-start, grid-column-start, grid-row-end, và grid-column-end chỉ trong một lần. Hoặc bạn có thể gán một cái tên cho item, để sử dụng với thuộc tính grid-template-areas của container.

Việc điều khiển các item này ban đầu có thể hơi khó hiểu. Nhưng một khi đã quen, bạn sẽ thấy chúng cực kỳ linh hoạt. Bạn có thể tạo ra các layout mà các phần tử chồng chéo lên nhau hoặc chiếm nhiều ô một cách dễ dàng. Đây là một phần không thể thiếu trong hướng dẫn CSS Grid này.

Ví dụ Xây dựng bố cục layout 3 cột đơn giản

Lý thuyết là vậy, giờ hãy cùng bắt tay vào một CSS Grid example thực tế nhé! Chúng ta sẽ xây dựng một layout trang web 3 cột cổ điển bao gồm header, menu, nội dung chính, sidebar và footer. Cách này dễ lắm, bạn thử xem!

HTML:

<div class="container">
  <header>Header</header>
  <nav>Menu</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* Cột menu và sidebar cố định, content linh hoạt */
  grid-template-rows: auto auto auto; /* Chiều cao tự động theo nội dung */
  gap: 15px;
  grid-template-areas:
    "header header header"
    "menu main sidebar"
    "footer footer footer";
}

header { grid-area: header; }
nav { grid-area: menu; }
main { grid-area: main; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }

Trong ví dụ trên, chúng ta dùng grid-template-areas để vẽ ra một bản đồ trực quan cho layout. Mỗi chuỗi văn bản đại diện cho một hàng. header và footer chiếm toàn bộ 3 cột. menu, main, và sidebar nằm gọn ở hàng giữa. Thật là một cách xây dựng bố cục Grid CSS trực quan và dễ hiểu phải không? Không còn các phép tính width hay float phức tạp nữa.

Hướng dẫn tạo layout responsive cho trang blog với CSS Grid

Một trong những ưu điểm lớn nhất của CSS Grid là khả năng tạo layout responsive một cách cực kỳ đơn giản. Hãy tưởng tượng một trang blog có danh sách các bài viết. Trên màn hình lớn, chúng ta muốn hiển thị 3 bài viết mỗi hàng. Nhưng trên điện thoại, chúng phải xếp chồng lên nhau thành một cột. Dưới đây là hướng dẫn CSS Grid để làm điều đó.

HTML (Giữ nguyên cấu trúc danh sách bài viết):

<div class="post-list">
  <article>Bài viết 1</article>
  <article>Bài viết 2</article>
  <article>Bài viết 3</article>
  <article>Bài viết 4</article>
  <article>Bài viết 5</article>
  <article>Bài viết 6</article>
</div>

CSS:

.post-list {
  display: grid;
  gap: 20px;
  /* Mặc định trên mobile: một cột */
  grid-template-columns: 1fr;
}

/* Trên màn hình lớn hơn 768px */
@media (min-width: 768px) {
  .post-list {
    /* Sử dụng hàm repeat() để tạo 3 cột bằng nhau */
    grid-template-columns: repeat(3, 1fr);
  }
}

Chỉ với một Media Query, chúng ta đã thay đổi toàn bộ bố cục. Hàm repeat(3, 1fr) là một cách viết ngắn gọn cho 1fr 1fr 1fr. Nó tự động tạo ra 3 cột có chiều rộng bằng nhau và lấp đầy không gian có sẵn. Khi màn hình co lại dưới 768px, layout sẽ quay về thiết lập mặc định là một cột. Sức mạnh của việc kết hợp Grid và Media Queries thật đáng kinh ngạc, giúp việc thiết kế responsive trở nên nhẹ nhàng hơn bao giờ hết.

Lợi ích khi sử dụng CSS Grid Layout trong thiết kế web

Việc chuyển sang sử dụng CSS Grid không chỉ là chạy theo xu hướng. Nó mang lại những lợi ích thực tiễn và to lớn cho quá trình phát triển web. Nếu bạn vẫn còn phân vân, hãy xem qua những ưu điểm này.

1. Mã nguồn đơn giản và dễ đọc hơn: So với các kỹ thuật layout cũ, mã CSS cho Grid ngắn gọn, rõ ràng và có ngữ nghĩa hơn. Việc sử dụng grid-template-areas giúp người khác đọc vào có thể hình dung ngay cấu trúc trang.
2. Kiểm soát bố cục hai chiều: Đây là lợi thế tuyệt đối. Khả năng sắp xếp đồng thời cả hàng và cột giải quyết được những bài toán layout phức tạp mà Flexbox khó có thể làm tốt.
3. Dễ dàng tạo thiết kế responsive: Như đã thấy ở ví dụ trên, việc thay đổi bố cục cho các kích thước màn hình khác nhau trở nên vô cùng đơn giản, không cần thay đổi cấu trúc HTML.
4. Căn chỉnh phần tử dễ dàng: Grid cung cấp các thuộc tính mạnh mẽ để căn chỉnh các item bên trong lưới, tương tự như Flexbox (align-items, justify-content).
5. Giảm sự phụ thuộc vào HTML: Với Grid, bạn có thể thay đổi thứ tự hiển thị của các phần tử bằng CSS mà không cần sửa đổi file HTML. Điều này rất hữu ích cho khả năng tiếp cận và SEO.

Nhìn chung, học CSS Grid là một khoản đầu tư xứng đáng. Nó giúp bạn viết mã sạch hơn, xây dựng giao diện nhanh hơn và dễ bảo trì hơn trong tương lai.

Khả năng tương thích của CSS Grid trên các trình duyệt

Một câu hỏi quan trọng khi học một công nghệ CSS mới là: Nó có được hỗ trợ rộng rãi không? Tin vui là, CSS Grid Layout hiện đã được hỗ trợ trên tất cả các trình duyệt hiện đại. Bao gồm Chrome, Firefox, Safari, Edge và cả các trình duyệt trên thiết bị di động. Theo trang Can I Use, hơn 97% người dùng toàn cầu đang sử dụng các trình duyệt có hỗ trợ đầy đủ CSS Grid. Con số này là rất ấn tượng và đủ để bạn tự tin sử dụng nó trong các dự án thực tế. Đối với các trình duyệt rất cũ như Internet Explorer 10 và 11, chúng có hỗ trợ một phiên bản cũ hơn của Grid với cú pháp hơi khác và có tiền tố -ms-. Tuy nhiên, với việc IE đã chính thức bị khai tử, bạn có thể không cần quá lo lắng về vấn đề này, trừ khi dự án của bạn có yêu cầu đặc biệt. Vì vậy, bạn hoàn toàn có thể yên tâm rằng các bố cục Grid CSS mà bạn tạo ra sẽ hiển thị nhất quán trên hầu hết các thiết bị của người dùng hiện nay.

Qua bài hướng dẫn CSS Grid toàn tập này, hy vọng bạn đã có cái nhìn rõ ràng về sức mạnh và sự linh hoạt của CSS Grid Layout. Từ việc định nghĩa một lưới đơn giản đến xây dựng các layout responsive phức tạp, Grid cung cấp một bộ công cụ mạnh mẽ giúp bạn biến những ý tưởng thiết kế táo bạo nhất thành hiện thực. Nó không chỉ là một công nghệ mới, mà là một sự thay đổi trong tư duy về cách chúng ta xây dựng bố cục cho web. Hãy bắt đầu áp dụng nó vào các dự án nhỏ của bạn, thực hành với các thuộc tính CSS Grid, và bạn sẽ nhanh chóng nhận ra tiềm năng to lớn của nó. Việc làm chủ CSS Grid chắc chắn sẽ nâng cao kỹ năng thiết kế web của bạn lên một tầm cao mới.

Bạn còn câu hỏi nào không? Hay có kinh nghiệm thú vị nào khi sử dụng CSS Grid muốn chia sẻ? Hãy để lại ý kiến của bạn ở phần bình luận nhé!

Nếu bạn cần một đối tác chuyên nghiệp để hiện thực hóa website của mình, đừng ngần ngại liên hệ với WiWeb để được tư vấn và hỗ trợ tận tình.