Lưới con CSS

Lưới CSS là một công cụ bố cục rất mạnh mẽ, nhưng các kênh hàng và cột được tạo trên lưới mẹ chỉ có thể được dùng để định vị các thành phần con trực tiếp của vùng chứa lưới. Bất kỳ tác giả nào đã xác định các vùng 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, bạn có thể chia sẻ kích thước, mẫu và tên kênh với các lưới lồng nhau. Bài viết này giải thích cách hoạt động của tính năng này.

Trước lưới phụ, nội dung thường được điều chỉnh thủ công để tránh bố cục rắc rối 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 con

Sau đây là một trường hợp sử dụng đơn giản giới thiệu các kiến thức cơ bản về subgrid CSS. Lưới được xác định bằng hai cột được đặt tên, cột đầu tiên có chiều rộng 20ch và cột thứ hai là "phần còn lại" của không gian 1fr. Không bắt buộc phải sử dụng tên cột nhưng rất hữu ích cho mục đích minh hoạ và giáo dục.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Sau đó, phần tử con của lưới đó (mở rộng hai cột đó) sẽ được đặt làm 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 trong lưới mẹ đã được chuyển hiệu quả xuống một cấp cho lưới phụ. Giờ đây, lưới phụ này có thể chỉ định phần tử con cho một trong các cột đó.

Thách thức! Lặp lại cùng một bản minh hoạ nhưng thực hiện cho 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 họ muốn. Giờ đây, nhà phát triển web cũng có thể làm được điều này! Giờ đây, bạn có thể thực hiện quy trình công việc chính xác này cùng nhiều quy trình khác.

Việc triển khai quy trình công việc lưới phổ biến nhất của nhà thiết kế có thể cung cấp thông tin chi tiết tuyệt vời về các tính 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 được lấy từ Chrome DevTools về một lưới macro bố cục trang dành cho 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 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 cho thiết kế sau.

Bên trong phần tử mẹ này là nhiều phần tử lồng nhau. Thiết kế yêu cầu phải có hình ảnh có chiều rộng đầy đủ 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 nhất là fullbleed-start và fullbleed-end. Việc đặt tên các đường lưới theo cách này cho phép các thành phần con căn chỉnh với nhau đồng thời bằng viết tắt vị trí của fullbleed. Rất tiện lợi 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 phù hợp vào bố cục lưới lồng nhau. Đây là khoảnh khắc kỳ diệu 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 đó sẽ chuyể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à một giá trị được dùng thay cho danh sách các kênh lưới. Các hàng và cột mà phần tử mở rộng từ phần tử 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 từ lưới .device có sẵn cho các 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 kênh trong lưới do .device tạo trước lưới phụ.

Sau khi xác định tất cả điều này, 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ị âm hoặc thủ thuật, thay vào đó là một dòng duy nhất đẹp mắt cho biết "bố cục của tôi trải dài từ fullbleed-start đến fullbleed-end".

.app > main img {
    grid-area: fullbleed;
}

Vậy là bạn đã có một lưới macro được triển khai trong CSS theo cách mà nhà thiết kế sử dụng. Ý tưởng này có thể mở rộng và phát triển cùng bạn nếu cần.

Kiểm tra khả năng hỗ trợ

Tính năng cải tiến dần bằng CSS và lưới con rất quen thuộc và đơn giản. Sử dụng @supports và bên trong dấu ngoặc đơn, hỏi trình duyệt xem trình duyệt có hiểu lưới phụ là một giá trị cho các cột hoặc hàng 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 có, tức là bạn 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. Ngoài ra, Chrome, Edge và Firefox đều có các công cụ cụ thể để trợ giúp về lưới phụ. 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ụ đó từ một năm trở lên.

Huy hiệu lưới phụ đóng vai trò như huy hiệu lưới, nhưng có thể phân biệt một cách trực quan lưới nào là lưới phụ và lưới nào không.

Tài nguyên

Danh sách này là tổng hợp các bài viết trên lưới phụ, bản minh hoạ và nguồn cảm hứng tổng thể để bắt đầu. Nếu bạn đang tìm kiếm bước tiếp theo để tìm hiểu về lưới con, hãy khám phá tất cả các tài nguyên tuyệt vời này!

• MDN
• Rachel Andrew có phụ đề phù hợp
• Rachel Andrew với 10 ví dụ tiêu biểu
• Rachel Andrew với một trang web ví dụ
• Bài viết của Ahmad Shadeed
• Michelle Barker tại Ngày hội Dịch vụ so sánh giá (CSS) năm 2022
• Thẻ
  • Codepen của Jhey
  • Codepen của Ahmad Shadeed
  • Codepen của Takeshi Kano
  • Codepen của Arvid
  • Codepen của Chris Coyier
  • Codepen của Miriam Suzanne
• Chris Coyier với biểu mẫu
• Facundo Corradini với tính năng căn chỉnh biểu mẫu
• Chris Coyier với điểm đánh dấu mục trong danh sách căn chỉnh
• Michelle Barker bật ra khỏi vùng chứa để khớp với lưới mẹ
• Miriam Suzanne hiển thị tên đường được đặt tên và hoạt động tương tác của lưới phụ
• Kevin Powell với kiến thức cơ bản về vùng được đặt tên
• Kevin Powell với danh sách được căn chỉnh
• Shannon Moeller với danh sách được căn chỉnh
• Kevin Powell với một lưới cấp trang được chuyển xuống các thành phần
• Elad Shechter với lớp phủ và dự phòng devtool
• Aaron Iker sử dụng lưới phụ để căn chỉnh đường cơ sở cho phần chú thích cuối trang theo kiểu chữ dễ đọc
• Adam Argyle với hình ảnh tràn lề bên trong một bài viết