Lưới con CSS

Lưới CSS là một công cụ bố cục rất mạnh mẽ, nhưng hàng và bạn chỉ có thể sử dụng các đường dẫn trong cột được tạo trên lưới mẹ để định vị phần tử con của vùng chứa lưới. Mọi khu vực lưới và đường có tên do tác giả xác định đều bị mất trên mọi phần tử 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 bằng 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ườm rà như cái 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ụ

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. Đáp lưới được xác định với hai cột được đặt tên, cột đầu tiên rộng là 20ch và cột thứ hai là "phần còn lại" của không gian 1fr. Tên cột là không bắt buộc nhưng rất phù hợp 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 thành phần 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 hiệu quả xuống một cấp tới lưới phụ. Lưới con này hiện 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ẻ "macro" cấp trang lưới

Nhà thiết kế thường sử dụng chung lưới ảnh, 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 được! Chính xác này hiện có thể đạt được quy trình làm việc và nhiều lợi ích khác.

Việc triển khai quy trình làm việc lưới phổ biến nhất của nhà thiết kế có thể mang lại hiệu quả cao thông tin chi tiết về khả năng, quy trình làm việc và tiềm năng của subgrid.

Đây là ảnh chụp màn hình của một macro bố cục trang trên thiết bị di động trong Công cụ của Chrome cho nhà phát triển lưới. 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 thiết bị của bạn. 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 thành phần mẹ này có nhiều phần tử lồng nhau. Thiết kế yêu cầu một phiên bản đầy đủ hình ảnh chiều rộng bên dưới hàng điều hướng và tiêu đề. Cột bên trái và bên phải xa nhất tên dòng là fullbleed-start và fullbleed-end. Đặt tên cho đường lưới theo cách này cho phép trẻ căn chỉnh đồng thời phù hợp với vị trí viết tắt trong tổng số fullbleed. Bạn sẽ sớm thấy tính năng này rất tiện lợi.

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 đẹp mắt, hãy sử dụng subgrid để truyền các hàng và cột được đặt tên rõ ràng vào bố cục lưới lồng nhau. Chiến dịch này đó là khoảnh khắc kỳ diệu subgrid. Bố cục thiết bị truyền các hàng và cột được đặt tên đến vùng chứa ứng dụng, sau đó truyền bố cục đó đến 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 các kênh lưới. Các hàng và các cột mà phần tử mở rộng từ phần tử mẹ, giờ đây là các hàng giống nhau cột mà Google 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 là không thể tham chiếu các tuyến đường lưới do .device tạo trước lưới phụ.

Với tất cả điều này, hình ảnh lồng nhau hiện có thể hiển thị tràn lề trong 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. Chiến dịch này có thể mở rộng và phát triển cùng với bạn khi cần.

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

Cải tiến tăng dần với CSS và lưới phụ rất quen thuộc và đơn giản. Dùng @supports và đặt trong dấu ngoặc đơn, hỏi trình duyệt xem trình duyệt có hiểu được không lưới con làm giá trị cho các hàng hoặc cột mẫu. Ví dụ sau đây sẽ kiểm tra xem thuộc tính grid-template-columns hỗ trợ từ khoá subgrid. Nếu true, có nghĩa là lưới phụ có thể được sử dụng

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Devtools

Chrome, Edge, Firefox và Safari đều có Công cụ cho nhà phát triển lưới CSS tuyệt vời và Chrome, Edge và Firefox 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ọ trong 115 trong khi Firefox đã lưu video 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 phân biệt được lưới là lưới con và lưới con thì không.

Tài nguyên

Danh sách này là tổng hợp các bài viết, 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 trong quá trình 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 về Ahmad Shadeed
• Michelle Barker tại Ngày hội Dịch vụ so sánh giá (CSS) năm 2022
• Thẻ bài
  • 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ên
• Kevin Powell với danh sách được điều 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 đến các thành phần
• Elad Shechter với lớp phủ và dự phòng của công cụ phát triển
• Aaron Iker đã dùng phông chữ đẹp mắt của lưới phụ để căn chỉnh đường cơ sở 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