Lưới con CSS

Ngày phát hành: 28 tháng 9 năm 2023

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. 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 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 khi có lưới con, nội dung thường được điều chỉnh thủ công để tránh bố cục bị lệch như bố cục 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. Bạn không bắt buộc phải đặt tên cột, nhưng tên cột 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 đó, một thành phần con của lưới đó, trải dài trên hai cột đó, đượ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à xong, các cột của lưới mẹ đã được truyền xuống một cấp một cách hiệu quả đến lưới con. Lưới con này hiện có thể chỉ định các phần tử con cho một trong các cột đó.

Thách thức! Lặp lại bản minh hoạ tương tự nhưng thực hiện cho grid-template-rows.

Chia sẻ lưới "vĩ mô" 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 với lưới đó. 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 làm việc theo lưới thiết kế phổ biến nhất 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 sẽ tạo ra 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ế này yêu cầu hình ảnh có chiều rộng đầy đủ trong 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. Bạn sẽ sớm thấy tính năng này rất tiện lợi.

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 đẹp mắt, hãy sử dụng subgrid để truyền các hàng và cột được đặt tên đẹp mắt vào bố cục lưới lồng nhau. Đây là khoảnh khắc kỳ diệu của 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ột mà phần tử này trải dài từ phần tử mẹ, hiện là các hàng và cột mà phần tử này 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 lưới do .device tạo trước khi có lưới con.

Khi tất cả các thuộc tính này được xác định, hình ảnh lồng nhau hiện có 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 như các nhà thiết kế sử dụng, được triển khai trong CSS. Ý 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ãy hỏi trình duyệt xem trình duyệt có hiểu được lưới con là giá trị cho các cột hoặc hàng của 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ác Công cụ cho nhà phát triển tuyệt vời về lưới CSS, đồng thời Chrome, Edge và Firefox có các công cụ cụ thể để hỗ trợ lưới con. Chrome đã công bố các công cụ của họ trong phiên bản 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 phân biệt rõ ràng những lưới là lưới con và những lưới không phải là lưới con.

Tài nguyên

Danh sách này là tập hợp các bài viết, bản minh hoạ và nguồn cảm hứng tổng thể về cách bắt đầu sử dụng lưới con. 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 với phụ đề được căn chỉnh
• Rachel Andrew với 10 ví dụ tuyệt vời
• Rachel Andrew với trang web chứa các ví dụ
• Bài viết của Ahmad Shadeed
• Michelle Barker tại Ngày CSS 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 các điểm đánh dấu mục danh sách được căn chỉnh
• Michelle Barker bật ra khỏi vùng chứa để căn chỉnh với lưới mẹ
• Miriam Suzanne hiển thị tên dòng được đặt tên và các lượt tương tác với lưới con
• 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 căn chỉnh
• Shannon Moeller với danh sách được căn chỉnh
• 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à dự phòng
• Aaron Iker sử dụng kiểu chữ đẹp mắt của lưới con để căn chỉnh đường cơ sở của chú thích
• Adam Argyle với hình ảnh tràn lề trong một bài viết