Trình tạo lưới CSS

Cách sử dụng

1. Xác định kích thước grid: nhập số cột và hàng cho bố cục của bạn.
2. Xác định các đường track: điều chỉnh chiều rộng của mỗi cột và chiều cao của mỗi hàng với các đơn vị fr, pixel, phần trăm, auto hoặc minmax().
3. Sao chép CSS: các thuộc tính display: grid, grid-template-columns, grid-template-rows và gap được tạo sẵn sàng để dán vào stylesheet của bạn.

Tại sao sử dụng trình tạo CSS Grid?

CSS Grid là hệ thống bố cục mạnh mẽ nhất của CSS, có khả năng tạo các bố cục hai chiều phức tạp mà trước đây yêu cầu các bảng, float hoặc JavaScript. Nhưng làm chủ grid-template-columns, các đơn vị fr, minmax(), repeat() và các vùng được đặt tên đòi hỏi sự thực hành. Trình tạo trực quan này cho phép bạn xây dựng bất kỳ grid nào bằng cách nhấp và kéo, sau đó tạo ra CSS sạch sẽ để sử dụng ngay lập tức hoặc nghiên cứu để hiểu sâu hơn về Grid.

Tính năng

• Trình xây dựng grid trực quan: nhấp để xác định trực quan các đường track của cột và hàng.
• Hỗ trợ đơn vị fr: sử dụng các đơn vị fr linh hoạt cho các cột tỷ lệ responsive.
• Phím tắt minmax(): tạo dễ dàng các cột responsive với các ràng buộc kích thước tối thiểu và tối đa.
• Kiểm soát khoảng cách: điều chỉnh column-gap và row-gap độc lập.
• Vùng được đặt tên: xác định grid-template-areas với một giao diện trực quan vẽ vùng.

Câu hỏi thường gặp

Đơn vị «fr» trong CSS Grid là gì?

Đơn vị fr (phân số) phân phối không gian khả dụng theo tỷ lệ. Trong một grid 3 cột với 1fr 2fr 1fr, cột giữa nhận được không gian gấp đôi các cột bên ngoài. Các đơn vị fr chia sẻ không gian còn lại sau khi phân bổ các đường track có kích thước cố định.

Cách tạo một grid responsive mà không cần media query?

Sử dụng repeat(auto-fill, minmax(200px, 1fr)) làm giá trị của grid-template-columns. Điều này tạo ra nhiều cột nhất mà kích thước tối thiểu cho phép, mở rộng để lấp đầy không gian khả dụng. Các phần tử tự động sắp xếp lại khi chiều rộng container thay đổi.

Sự khác biệt giữa grid-template và grid-auto là gì?

grid-template-columns/rows xác định các đường track rõ ràng mà bạn chỉ định. grid-auto-columns/rows xác định kích thước của các đường track ngầm, các cột và hàng được tạo tự động khi các phần tử tràn ra khỏi grid rõ ràng.

Lịch sử ngắn của CSS Grid

Trước CSS Grid, các bố cục web đã trải qua ba thời kỳ đau đớn. Bố cục dựa trên bảng (1995-2008) lạm dụng phần tử <table> cho cấu trúc trực quan, với việc «cắt nhỏ và chia» các bản dựng Photoshop thành lưới HTML. Bố cục dựa trên float (2008-2013) đã thay thế các bảng bằng thuộc tính float, đòi hỏi các thủ thuật «clearfix» như micro-clearfix của Nicolas Gallagher (2011) để chứa các phần tử con bị bao bọc. Flexbox (CSS Flexible Box Layout Module Level 1, Khuyến nghị W3C 2018) đã giải quyết các bố cục một chiều nhưng gặp khó khăn với các lưới hai chiều thực sự. Câu chuyện CSS Grid bắt đầu với việc triển khai -ms-grid của Microsoft trong Internet Explorer 10 (2012), một phiên bản ban đầu đã thông tin cho thông số kỹ thuật W3C. Bản nháp công khai W3C đầu tiên của CSS Grid Layout Module Level 1 ra mắt vào tháng 4 năm 2011, nhưng động lực thực sự đến từ công việc vận động của Rachel Andrew (cuốn sách Get Ready for CSS Grid Layout của bà, 2016) và Jen Simmons (nhà phát triển-truyền giáo Mozilla, vòng hội nghị 2016-2018). Cuộc đua trình duyệt đã được giải quyết trong một khoảng thời gian hai tháng đáng chú ý vào tháng 3 năm 2017: Chrome 57, Firefox 52, Safari 10.1 và Edge 16 đều đã cung cấp Grid không tiền tố trong vòng vài tuần với nhau. W3C đã đánh dấu Grid Level 1 là Khuyến nghị Ứng viên vào tháng 12 năm 2016; Khuyến nghị W3C cuối cùng đến vào tháng 8 năm 2020. Subgrid (Level 2) đã được cung cấp trong Firefox 71 (12/2019), Safari 16 (9/2022) và Chrome 117 (9/2023). Biên giới tiếp theo là bố cục Masonry được đề xuất (đề xuất CSS Working Group 2020, sau cờ trong Firefox kể từ 2021).

Giải phẫu của một lưới CSS

• Container lưới. display: grid (hoặc display: inline-grid) biến bất kỳ phần tử nào thành ngữ cảnh lưới. Các con trực tiếp của phần tử đó trở thành «mục lưới» và tham gia vào bố cục lưới. Cháu không bị ảnh hưởng trừ khi chúng cũng đặt display: grid.
• grid-template-columns và grid-template-rows. Định nghĩa các rãnh rõ ràng (cột và hàng). Giá trị có thể cố định (px, em, rem), linh hoạt (fr, đơn vị «phân số» được định nghĩa trong thông số kỹ thuật CSS Grid), được định kích thước theo nội dung (auto, min-content, max-content), hoặc bất kỳ sự kết hợp nào. grid-template-columns: 200px 1fr 1fr tạo một sidebar 200px cộng với hai cột linh hoạt bằng nhau.
• Đơn vị fr. Đơn vị phân số phân phối không gian còn lại sau khi các rãnh kích thước cố định được phân bổ. 1fr 2fr 1fr cho cột giữa không gian còn dư gấp đôi các cột bên. fr là duy nhất với Grid (và phương trình liên quan flex-basis: 0 1 fr trong Flexbox không phải là cùng một thứ). Nó giải quyết những gì mà mô hình «cột phần trăm» đã vật lộn trong nhiều thập kỷ: phân phối sạch không gian dư.
• repeat() và minmax(). repeat(3, 1fr) định nghĩa gọn gàng ba cột bằng nhau. minmax(200px, 1fr) giới hạn một rãnh trong một phạm vi. Sự kết hợp sát thủ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) tạo ra một lưới đáp ứng tự động điều chỉnh số lượng cột để phù hợp với container, không cần truy vấn phương tiện. Một dòng duy nhất này đã thay thế hàng ngàn định nghĩa breakpoint trong CSS sản xuất.
• grid-template-areas. Một cú pháp chuỗi được sắp xếp trực quan đặt tên cho các vùng của lưới. Con tham gia vào một vùng có tên với grid-area: header. Kết quả là bố cục-như-nghệ-thuật-ASCII: bất kỳ ai đọc CSS có thể hình dung lưới từ nguồn. Đặc biệt mạnh mẽ cho bố cục «chén thánh» (header / sidebar / chính / aside / footer) đã đánh bại các nhà thiết kế CSS trong một thập kỷ.
• gap (và column-gap, row-gap). Định nghĩa khoảng cách giữa các rãnh. gap: 16px giãn cách đồng đều tất cả các hàng và cột. Trước Grid, điều này đòi hỏi các mẫu padding+margin mong manh hoặc các lề âm được tính toán cẩn thận. Cùng một thuộc tính gap sau đó đã được thêm vào Flexbox (được hỗ trợ phổ biến từ năm 2022) và bây giờ được coi là cách chính tắc để xử lý khoảng cách giữa các mục trong CSS hiện đại.

Các mô hình Grid trong thế giới thực

• Thư viện ảnh. Mô hình repeat(auto-fill, minmax(200px, 1fr)) là CSS chiếm ưu thế cho các trang web danh mục đầu tư (lưới Behance), thư viện ảnh (kiểu Unsplash) và bộ sưu tập sản phẩm. Tự động điều chỉnh số cột mà không cần truy vấn phương tiện về cơ bản là không thể trước Grid.
• Bảng điều khiển và bảng quản trị. Grafana, Datadog, Stripe Dashboard và hầu hết UI quản trị hiện đại sử dụng các vùng lưới có tên để định vị thẻ, sidebar và các vùng nội dung. Trình xây dựng bảng điều khiển kéo-thả (DataDog, Looker, Tableau) chuyển đổi hành động của người dùng thành các đột biến chuỗi grid-template-areas.
• Bố cục kiểu tạp chí. Các trang biên tập (The Guardian, NYT, Vox) sử dụng Grid cho các bố cục bất đối xứng với các phần tử chồng lấp, hình ảnh hero lớn bao trùm nhiều cột và các trích dẫn kéo ra khỏi cột văn bản chính. Trục z của Grid (z-index với các vùng rõ ràng) xử lý phân lớp một cách tự nhiên.
• Lưới thẻ sản phẩm. Cửa hàng Shopify, Amazon, Etsy. Mô hình này phổ biến đến mức Tailwind CSS, Bootstrap và Bulma đều cung cấp các thành phần thẻ dựa trên lưới như một phần của bộ tiện ích cốt lõi của họ. Tỷ lệ khung hình thẻ hiện thường được khóa bằng thuộc tính aspect-ratio (Safari 15, Chrome 88, 2021).
• Bố cục «chén thánh». Header / sidebar trái / nội dung chính / sidebar phải / footer. Bố cục 5 vùng này là vấn đề chưa được giải quyết của CSS trong 15 năm. Với grid-template-areas và 8 dòng CSS, nó trở thành tầm thường vào năm 2017. Mô hình này chiếm ưu thế ở các trang tài liệu (Stripe Docs, MDN, Vercel Docs).
• Bố cục biểu mẫu. Bố cục biểu mẫu hai cột với nhãn ở bên trái và đầu vào ở bên phải, biểu mẫu địa chỉ với thành phố/tiểu bang/mã bưu điện trong một hàng, trình hướng dẫn nhiều bước. Grid cho phép các nhãn và đầu vào căn chỉnh gọn gàng trên các hàng ngay cả khi chiều rộng nội dung thay đổi. Mô hình thay thế các phương pháp tiếp cận thủ thuật-chiều-rộng-nhãn trước đó bằng CSS sạch hơn.
• Định vị modal và hộp thoại. display: grid; place-items: center; trên một lớp phủ toàn viewport hoàn toàn căn giữa một hộp thoại theo chiều ngang và chiều dọc với một dòng duy nhất, thay thế hàng thập kỷ các mô hình position: absolute; top: 50%; transform: translateY(-50%);. place-items là cách chính tắc 2024 để căn giữa nội dung bất kỳ.
• Đáp ứng mà không cần truy vấn phương tiện. Kết hợp repeat(auto-fill, minmax(...)) với gap tạo ra các bố cục thích ứng với chiều rộng container mà không cần bất kỳ truy vấn phương tiện nào. Đây là nền tảng của thiết kế đáp ứng hiện đại: các bố cục đáp ứng với kích thước container thay vì kích thước viewport, dự đoán các Container Queries (hiện cũng đã được cung cấp, 2023).

Tiêu chuẩn và cột mốc

• IE10 -ms-grid (2012). Microsoft đã cung cấp triển khai giống Grid đầu tiên, được thiết kế bởi Phil Cupp tại Microsoft. Cú pháp khác với thông số kỹ thuật W3C cuối cùng nhưng đã chứng minh khái niệm và ảnh hưởng đến các quyết định thiết kế sau này.
• CSS Grid Layout Module Level 1, Bản thảo Công tác W3C (tháng 4 năm 2011). Bản thảo công khai W3C đầu tiên. Nhiều lần lặp lại đã theo sau; cú pháp đã phát triển đáng kể giữa năm 2011 và triển khai cuối cùng năm 2017.
• Vận động của Rachel Andrew và Jen Simmons (2014-2017). Cuốn sách của Andrew Get Ready for CSS Grid Layout (Smashing Magazine, 2016) và các bài nói chuyện hội nghị của Simmons với tư cách là nhà phát triển-truyền giáo Mozilla đã xây dựng cơ sở kiến thức cộng đồng làm cho việc các trình duyệt vận chuyển trở nên khả thi. Cả hai đều được ghi nhận trong các ghi chú biên tập viên W3C của thông số kỹ thuật.
• Cuộc đua trình duyệt, tháng 3 năm 2017. Trong khoảng thời gian hai tháng đáng chú ý, Chrome 57 (9 tháng 3), Firefox 52 (7 tháng 3), Safari 10.1 (27 tháng 3) và Edge 16 (tháng 10 năm 2017) đều đã cung cấp Grid không tiền tố. Mức độ vận chuyển chéo trình duyệt đồng bộ này gần như chưa từng có đối với một tính năng có độ phức tạp này.
• Khuyến nghị Ứng viên (tháng 12 năm 2016). CSS Grid Level 1 đã được nâng lên Khuyến nghị Ứng viên W3C, giai đoạn cuối cùng trước Khuyến nghị W3C. Giai đoạn CR thường mất nhiều năm; Grid đã di chuyển nhanh hơn hầu hết các tính năng CSS ở giai đoạn này.
• Khuyến nghị W3C (tháng 8 năm 2020). Grid Level 1 đã được hoàn thiện như một Khuyến nghị W3C. Đây về mặt kỹ thuật là ngày «ra mắt» của thông số kỹ thuật, nhưng mọi trình duyệt chính đã cung cấp một triển khai hoạt động ba năm trước đó.
• Subgrid (Level 2, 2019-2023). Subgrid cho phép một mục lưới kế thừa các định nghĩa rãnh của cha mẹ nó, giải quyết vấn đề «căn chỉnh lưới lồng nhau». Firefox 71 (12/2019), Safari 16 (9/2022), Chrome 117 (9/2023). Việc triển khai chậm của Chrome phản ánh độ phức tạp triển khai.
• Bố cục Masonry (đề xuất, 2020-). CSS Working Group đã tranh luận về cú pháp kể từ năm 2020. Firefox đã cung cấp nó sau một cờ vào năm 2021. Các bố cục chảy kiểu Pinterest đóng gói các mục vào các cột là trường hợp sử dụng mục tiêu. Đội Chrome (do Apple dẫn đầu) và đội Mozilla đã đề xuất các cú pháp cạnh tranh; giải pháp đang chờ tính đến năm 2024.

Các câu hỏi thường gặp khác

Khi nào tôi nên sử dụng Grid so với Flexbox?

Lối nói ngắn gọn của cộng đồng: Flexbox dành cho một chiều, Grid dành cho hai. Nếu bạn đang xếp một hàng nút hoặc căn chỉnh các mục theo một hướng duy nhất, Flexbox đơn giản hơn. Nếu bạn đang thiết kế một bố cục toàn trang với các hàng và cột phải căn chỉnh, Grid là công cụ phù hợp. Nhiều bố cục thực tế kết hợp cả hai: Grid cho khung trang, Flexbox cho căn chỉnh cấp thành phần bên trong mỗi vùng lưới. Các framework hiện đại (Tailwind, Bootstrap 5) đón nhận mô hình này.

CSS Grid có hoạt động trong các trình duyệt cũ không?

Tất cả các trình duyệt thường xanh (Chrome, Firefox, Safari, Edge) hỗ trợ Grid kể từ tháng 3 năm 2017. Internet Explorer 11 chỉ có cú pháp -ms-grid đầu tiên (tập hợp con, có tiền tố, thiếu nhiều tính năng). Để hỗ trợ IE11, sử dụng các truy vấn @supports để quay lại Flexbox hoặc bố cục dựa trên float. Tính đến năm 2024, IE11 có mức sử dụng toàn cầu dưới 0,5%, vì vậy hầu hết các đội đã bỏ fallback. Caniuse.com báo cáo hỗ trợ toàn cầu trên 97% cho Grid không có tiền tố.

Sự khác biệt giữa grid-template-areas và grid-area là gì?

grid-template-areas được đặt trên container lưới và lập bản đồ trực quan các vùng có tên của lưới (một chuỗi mỗi hàng). grid-area được đặt trên một mục lưới để gán nó cho một trong những vùng có tên đó. Cả hai làm việc cùng nhau: container khai báo «bản đồ», các mục khai báo «tôi là vùng X». Bạn cũng có thể sử dụng grid-area trực tiếp với số dòng (grid-area: 1 / 1 / 3 / 4) thay vì tên, điều này hữu ích cho các bố cục động.

Subgrid là gì và khi nào tôi nên sử dụng nó?

Subgrid cho phép một lưới lồng nhau kế thừa các định nghĩa rãnh của lưới cha mẹ thay vì tạo của riêng mình. Điều này giải quyết vấn đề căn chỉnh các mục trên các lưới lồng nhau, ví dụ, một thẻ có bố cục bên trong phải căn chỉnh với các thẻ xung quanh. Sử dụng grid-template-columns: subgrid trên lưới lồng nhau. Có sẵn trong Firefox 71+ (12/2019), Safari 16+ (9/2022), Chrome 117+ (9/2023). Quay lại lưới lồng nhau thông thường trong các trình duyệt không hỗ trợ.

Grid tương tác với khả năng tiếp cận như thế nào?

Vị trí Grid không thay đổi thứ tự nguồn DOM: các mục xuất hiện ở vị trí trực quan bạn chỉ định, nhưng trình đọc màn hình và thứ tự tab bàn phím theo nguồn. WCAG 2.1 SC 1.3.2 Trình tự Có nghĩa yêu cầu thứ tự nguồn có ý nghĩa khi các kiểu được loại bỏ. Hàm ý: trước tiên thiết kế nguồn DOM của bạn cho thứ tự đọc hợp lý, sau đó sử dụng Grid để đặt các mục một cách trực quan. Nếu bạn sắp xếp lại các mục một cách đáng kể với grid-column: 3 / 5; grid-row: 2, kiểm tra với trình đọc màn hình để xác nhận thứ tự được nói vẫn có ý nghĩa.