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ị các 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à đườ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, bạn có thể chia sẻ kích thước kênh, mẫu và tên 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 các 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.
Thông tin 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 các kiến thức cơ bản về CSS subgrid. Một 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 hữu ích cho mục đích minh họa và giáo dụ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 đó sẽ trải dài hai cột đó, được đặt làm vùng chứa lưới và sử dụng các cột của lưới gốc 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à xong, các cột của lưới mẹ đã được chuyển xuống một cấp thành một lưới con. Lưới con này hiện có thể chỉ định các cột con cho một trong hai cột đó.
Thách thức! Lặp lại bản 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 trên toàn bộ thiết kế, căn chỉnh bất kỳ phần tử nào mà 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 được quy trình làm việc chính xác này cùng nhiều lợi ích khác.
Việc triển khai quy trình làm việc phổ biến nhất theo dạng lưới của 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 làm việc và tiềm năng của subgrid.
Dưới đây là ảnh chụp màn hình lưới macro bố cục trang trên thiết bị di động được chụp từ Công cụ của Chrome cho nhà phát triển. Các đường kẻ có tên và có các khu vực rõ ràng để đặt thành phần.
CSS sau đây 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 đều 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 có thiết kế như 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 hàng điều hướng và tiêu đề. Tên dòng cột ngoài cùng bên trái và bên phải là fullbleed-start và fullbleed-end. Việc đặt tên cho các đường lưới theo cách này giúp các thành phần con có thể căn chỉnh đồng thời các đường lưới đó với định dạng 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 thiết bị tổng thể đượ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 tên hợp lý 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 được đặt tên đến vùng chứa ứng dụng, sau đó truyền các hàng và cột này đến mọi 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à 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 trải rộng từ thành phần mẹ, giờ đây chính là các hàng và cột mà phần tử cung cấp. Điều này giúp tên dòng trong lưới .device hiển thị với phần tử con của .app, thay vì chỉ .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ả những điều này đã được xác định, hình ảnh lồng nhau giờ đây có thể hiển thị tràn lề trong bố cục nhờ subgrid. Không có giá trị hay thủ thuật tiêu cực, thay vào đó là một dòng giới thiệu thú vị cho biết "bố cục của tôi kéo dài từ fullbleed-start đến fullbleed-end".
.app > main img {
grid-area: fullbleed;
}
Vậy là xong, một lưới macro mà 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 nếu cần.
Kiểm tra khả năng hỗ trợ
Việc nâng cấp dần với CSS và lưới con khá 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 trình duyệt có hiểu lưới con là một 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, có nghĩa là 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ó Công cụ cho nhà phát triển lưới CSS tuyệt vời. 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ọ trong 115 trong khi Firefox đã sử dụng 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 bạn có thể phân biệt lưới nào là lưới con và không phải lưới.
Tài nguyên
Danh sách này là tập hợp các bài viết dưới lưới con, bản minh hoạ và nguồn cảm hứng chung để bắt đầu. Nếu bạn đang tìm kiếm bước tiếp theo cho phương pháp giáo dục phụ của mình, hãy thoả sức khám phá tất cả những tài nguyên hữu ích này!
- MDN
- Rachel Andrew với phụ đề phù hợp
- Rachel Andrew tham khảo 10 ví dụ điển hình
- Rachel Andrew – một trang web ví dụ
- Bài viết về Ahmad Shadeed
- Michelle Barker tại sự kiện CSS Day năm 2022
- Thẻ
- Chris Coyier chụp biểu mẫu
- Facundo Corradini với 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 để điều chỉnh cho phù hợp với lưới gốc
- Miriam Suzanne cho thấy tên dòng được đặt tên và hoạt động tương tác ở lưới con
- Kevin Powell chia sẻ thông tin cơ bản về khu vực được nêu tên
- Kevin Powell với các danh sách phù hợp
- Shannon Moeller với danh sách phù hợp
- Kevin Powell với lưới cấp trang được truyền xuống 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 đúng kiểu chữ của lưới con để căn chỉnh đường cơ sở cho 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