Vùng lưới CSS

Giới thiệu

• CSS Grid đã được hỗ trợ trên mọi trình duyệt lớn từ năm 2017
• Tuy nhiên, ngay cả đến năm 2024, vẫn còn nhiều người không sử dụng tính năng grid template areas
• Bài viết này nhằm giải thích sự đơn giản và mạnh mẽ của grid template areas

Các vùng lưới được đặt tên trong CSS

• Trong CSS Grid, có thể đặt tên cho từng vùng lưới và tham chiếu chúng trong toàn bộ CSS
• Ví dụ, có thể định nghĩa một bố cục lưới với hai cột và ánh xạ grid-area cho từng mục

Quy tắc của grid template areas

• Các vùng được định nghĩa phải có hình chữ nhật
• Tất cả các vùng phải được định nghĩa

Cú pháp grid template

• Cần sử dụng thuộc tính grid-template-areas để định nghĩa các vùng lưới
• Có thể dùng nhiều chuỗi vùng
• Một chuỗi đơn biểu thị bố cục một chiều, còn nhiều chuỗi biểu thị bố cục đa chiều

Các đường lưới được đặt tên trong CSS

• Có thể đặt tên duy nhất cho các đường lưới
• Ví dụ, trong một lưới có 3 cột, có thể đặt tên cho từng đường
• Các đường lưới được đặt tên không thay thế số thứ tự đường mặc định

Các trường hợp sử dụng của grid template areas

• Đảo hướng lưới: có thể dễ dàng thay đổi hướng bố cục bằng grid-template-areas
• Bố cục header: có thể định nghĩa bố cục header bằng grid-template-areas và làm cho nó phản hồi tốt
• Bố cục biên tập: có thể dễ dàng định nghĩa và thay đổi bố cục chứa nhiều loại nội dung khác nhau

Bố cục có điều kiện và CSS :has()

• Có thể dùng bộ chọn CSS :has() để thay đổi bố cục tùy theo sự hiện diện của phần tử

Hỗ trợ đa ngôn ngữ (LTR/RTL)

• CSS Grid điều chỉnh bố cục theo hướng trang (LTR hoặc RTL)
• Điều này có nghĩa là các vùng lưới được đặt tên cũng tuân theo hướng trang

Vùng lưới và DevTools

• Mọi trình duyệt lớn đều cung cấp công cụ tốt cho vùng lưới (Chrome, Safari, Firefox)
• Mỗi trình duyệt có cách trực quan hóa vùng lưới khác nhau

Tổng kết của GN⁺

• Tính năng grid template areas của CSS Grid rất hữu ích để hiểu và quản lý bố cục theo cách trực quan
• Đặc biệt hữu ích khi các thành viên trong nhóm cần thay đổi bố cục
• Bài viết này giải thích sự đơn giản và mạnh mẽ của grid template areas, qua đó khuyến khích nhiều người hơn sử dụng tính năng này
• Một dự án khác cung cấp tính năng tương tự là Flexbox

[GN⁺]

Ý kiến Hacker News

• Bị thu hút bởi bản demo hoạt ảnh, nhưng nó không được triển khai bằng CSS

  • Đã học Flexbox và cảm thấy hài lòng, nên chưa thấy cần phải học Grid
  • Có những lý do để thích Grid, nhưng trên thực tế vẫn chưa cảm thấy sự cần thiết
  • Với bảng dữ liệu thì dùng bảng thực sự

• Bài viết này nhấn mạnh các ưu điểm của Grid và sự rườm rà của cú pháp CSS

  • Có hai chiều và ba tham số (bắt đầu, kết thúc, kích thước)
  • Có ít nhất ba cách để khai báo mỗi tham số
  • Các thuộc tính viết tắt khiến nội dung khó đọc
  • Khó đọc Grid do người khác viết

• 1/3 không phải là phân số mà là một phạm vi từ 1 đến 3

  • Không thể hiểu tại sao lại chọn cú pháp này
  • Trong lập trình có những cú pháp biểu diễn phạm vi tốt hơn (ví dụ: 1..3)

• Về Grid Garden và Flexbox Froggy

  • Grid Garden
  • Flexbox Froggy

• Không hiểu Grid hay Flexbox

  • Chiến lược layout cuối cùng từng dùng tốt là float
  • Bài viết này giúp có thêm tự tin để dùng CSS Grid cho thiết kế layout tiếp theo
  • Cảm ơn vì một bài viết được làm rất tốt

• Tò mò không biết có phiên bản giới thiệu nhập môn nào của tài liệu này không

  • Đã bị lạc ngay ở phần giới thiệu
  • Không hiểu line number là gì
  • Bị mắc ở những “phân số” như 1/3 và 1/4

• Rất khuyến nghị Mondrian with auto flow của Jen Simmons

  • Jen Simmons Mondrian
  • Thử thay đổi kích thước cửa sổ sẽ thấy rất ấn tượng
  • Muốn hiểu cách auto flow phát hiện và lấp đầy khoảng trống

• Thắc mắc vì sao cú pháp lại được định nghĩa là 1/2 và 3/4

  • Cú pháp như 1-2 hoặc 1->2 có vẻ dễ hiểu hơn

• Thích các bài blog tương tác

  • Khuyên nên thử nghiệm các vùng Grid trong công cụ
  • Đã dùng Grid Layoutit nhiều năm và việc chỉnh khoảng cách trở nên dễ hơn rất nhiều

• Có lẽ đây là lần đầu tiên thực sự hiểu được CSS Grid

  • Cách đánh số đã giúp ích rất nhiều
  • Một bài viết tuyệt vời, sẽ thường xuyên tham khảo