Lưới CSS là một công cụ bố cục rất mạnh mẽ, nhưng các bản nhạc hàng và cột được tạo trên lưới mẹ chỉ có thể dùng để định vị phần tử con trực tiếp của vùng chứa lưới. Mọi tác giả đã xác định các vùng lưới và dòng được đặt tên đều bị mất trên bất kỳ phần tử nào khác ngoài phần tử con trực tiếp. Với subgrid, kích thước theo dõi, các mẫu và tên có thể được chia sẻ với các lưới lồng nhau. Bài viết này giải thích cách hoạt động.
Trước lưới con, nội dung thường được điều chỉnh thủ công để tránh bố cục lộn xộn như thế này.
Sau lưới con, bạn có thể căn chỉnh nội dung có kích thước thay đổi.
Kiến thức cơ bản về lưới phụ
Đây là một trường hợp sử dụng đơn giản nhằm giới thiệu kiến thức cơ bản về CSS subgrid. Lưới được xác định bằng 2 cột được đặt tên, cột đầu tiên rộng 20ch và cột thứ hai là "phần còn lại" của không gian 1fr. Tên cột không bắt buộc nhưng rất phù hợp cho mục đích minh hoạ và cung cấp kiến thức.
.grid {
display: grid;
gap: 1rem;
grid-template-columns: [column-1] 20ch [column-2] 1fr;
}
Sau đó, thành phần con của lưới đó, trải rộng qua hai cột đó, được đặt thành vùng chứa lưới và sử dụng các cột của lưới mẹ bằng cách đặt grid-template-columns thành subgrid.
.grid > .subgrid {
grid-column: span 2;
display: grid;
grid-template-columns: subgrid; /* 20ch 1fr */
}
Vậy là các cột của lưới mẹ đã được chuyển xuống một cấp một cách hiệu quả cho một lưới con. lưới con này hiện có thể chỉ định các phần tử con vào một trong các cột đó.
Thách thức! Lặp lại thao tác minh hoạ tương tự nhưng thực hiện trong grid-template-rows.
Chia sẻ lưới "macro" cấp trang
Nhà thiết kế thường làm việc với các lưới dùng chung, vẽ các đường kẻ trên toàn bộ thiết kế, căn chỉnh bất kỳ phần tử nào họ muốn. Giờ đây, các nhà phát triển web cũng có thể làm vậy! Giờ đây, bạn có thể thực hiện quy trình công việc chính xác này và nhiều lợi ích khác.
Việc triển khai quy trình làm việc phổ biến nhất của lưới dành cho nhà thiết kế có thể cung cấp thông tin chi tiết tuyệt vời về các khả năng, quy trình công việc và tiềm năng của subgrid.
Dưới đây là ảnh chụp màn hình được chụp từ Công cụ của Chrome cho nhà phát triển về lưới macro bố cục trang trên thiết bị di động. Các đường có tên và có các khu vực rõ ràng để đặt thành phần.
CSS sau đây sẽ tạo lưới này, với các hàng và cột đã được đặt tên cho bố cục thiết bị. Mỗi hàng và cột có một kích thước.
.device {
display: grid;
grid-template-rows:
[system-status] 3.5rem
[primary-nav] 3rem
[primary-header] 4rem
[main] auto
[footer] 4rem
[system-gestures] 2rem
;
grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}
Một số kiểu bổ sung cung cấp thiết kế sau.
Bên trong thành phần mẹ này là nhiều phần tử lồng nhau. Thiết kế này yêu cầu hình ảnh có chiều rộng đầy đủ bên dưới các hàng điều hướng và tiêu đề. Tên dòng cột bên trái và bên phải xa nhất là fullbleed-start và fullbleed-end. Việc đặt tên cho các đường lưới theo cách này cho phép thành phần con căn chỉnh đồng thời với cách viết tắt vị trí của fullbleed. Việc này rất thuận tiện vì bạn sẽ sớm thấy.
Với bố cục tổng thể của thiết bị được tạo bằng các hàng và cột được đặt tên phù hợp, hãy sử dụng subgrid để chuyển các hàng và cột có tên phù hợp sang bố cục lưới lồng nhau. Đây chính là khoảnh khắc kỳ diệu của subgrid. Bố cục thiết bị sẽ chuyển các hàng và cột đã đặt tên đến vùng chứa ứng dụng, sau đó chuyển các hàng và cột này cho từng phần tử con.
.device > .app,
.app > * {
display: grid;
grid: subgrid / subgrid;
/* same as */
grid-template-rows: subgrid;
grid-template-columns: subgrid;
}
Lưới con CSS là một giá trị được dùng thay cho danh sách đường dẫn lưới. Các hàng và cột mà phần tử đang mở rộng so với phần tử mẹ, giờ đây chính là các hàng và cột mà phần tử cung cấp. Thao tác này làm cho tên dòng từ lưới .device hiển thị cho thành phần con của .app, thay vì chỉ có .app. Các phần tử bên trong .app không thể tham chiếu đến các đường lưới do .device tạo trước lưới con.
Với tất cả điều này đã xác định được, giờ đây hình ảnh lồng nhau có thể hiển thị tràn lề trong
bố cục nhờ subgrid. Không có giá trị hoặc thủ thuật âm, thay vào đó là một dòng giới thiệu
một cách thú vị cho biết “bố cục của tôi trải rộng từ fullbleed-start đến fullbleed-end”.
.app > main img {
grid-area: fullbleed;
}
Vậy là xong, một lưới macro như các nhà thiết kế sử dụng, được triển khai trong CSS. Khái niệm này có thể mở rộng quy mô và phát triển cùng bạn khi cần.
Kiểm tra khả năng hỗ trợ
Việc nâng cao dần bằng CSS và lưới con là một việc quen thuộc và đơn giản.
Sử dụng @supports và bên trong dấu ngoặc đơn, hãy hỏi trình duyệt xem có hiểu lưới phụ là giá trị cho các hàng hoặc cột mẫu hay không. Ví dụ sau đây sẽ kiểm tra xem thuộc tính grid-template-columns có hỗ trợ từ khoá subgrid hay không. Nếu đúng thì có nghĩa là hệ thống có thể sử dụng lưới con
@supports (grid-template-columns: subgrid) {
/* safe to enhance to */
}
Công cụ cho nhà phát triển
Chrome, Edge, Firefox và Safari đều có lưới CSS Công cụ cho nhà phát triển tuyệt vời, còn Chrome, Edge và Firefox có các công cụ cụ thể để trợ giúp lưới con. Chrome công bố các công cụ của họ vào năm 115, trong khi Firefox đã có các công cụ này từ một năm trở lên.
Huy hiệu lưới con hoạt động giống như huy hiệu lưới, nhưng sẽ phân biệt được lưới nào là lưới con và lưới nào không.
Tài nguyên
Danh sách này là tuyển tập các bài viết về lưới con, bản minh hoạ và nguồn cảm hứng tổng thể để bắt đầu. Nếu bạn đang tìm bước tiếp theo cho hoạt động giáo dục dưới dạng lưới, hãy thoải mái khám phá tất cả những tài nguyên tuyệt vời này!
- MDN
- Rachel Andrew với phụ đề phù hợp
- Rachel Andrew cùng 10 ví dụ điển hình
- Rachel Andrew cùng một trang web ví dụ
- Bài viết về Ahmad Shadeed
- Michelle Barker tại CSS Day năm 2022
- Thẻ
- Chris Coyier với các biểu mẫu
- Facundo CorRadini căn chỉnh biểu mẫu
- Chris Coyier căn chỉnh các điểm đánh dấu mục trong danh sách
- Michelle Barker bật ra khỏi vùng chứa để căn chỉnh với lưới mẹ
- Miriam Suzanne hiện tên dòng được đặt tên và hoạt động tương tác dưới lưới
- Kevin Powell chia sẻ kiến thức cơ bản về khu vực nhất định
- Kevin Powell với các danh sách căn chỉnh
- Shannon Moeller với các danh sách đã căn chỉnh
- Kevin Powell với một lưới cấp trang được truyền đến các thành phần
- Elad Shechter với lớp phủ devtool và tính năng dự phòng
- Aaron Iker sử dụng lưới con rất đẹp mắt để căn chỉnh đường cơ sở của chú thích cuối trang
- Adam Argyle với hình ảnh tràn lề bên trong một bài viết
Một phần trong Loạt video mới có khả năng tương tác