Bạn muốn tạo ra các layout web đẹp mắt, linh hoạt và nhất quán bất kể nội dung thay đổi? CSS Subgrid chính là giải pháp tối ưu cho bạn!
CSS Subgrid là gì?
Khi các nhà thiết kế tạo bố cục trong bản mockup, mọi thứ bao gồm cả nội dung thường trông được căn chỉnh hoàn hảo và nhất quán.
Tuy nhiên, trong thực tế, nội dung do người dùng tạo ra lại rất đa dạng. Ví dụ, một thẻ testimonial (phản hồi của khách hàng) có thể chỉ có một câu ngắn gọn, trong khi một thẻ khác lại có cả một đoạn văn bản dài. Điều này gây khó khăn trong việc duy trì sự căn chỉnh hoàn hảo cho layout.
CSS Subgrid có thể dễ dàng xử lý những điểm không nhất quán về bố cục web này. Nó cho phép các phần tử được lồng bên trong căn chỉnh với lưới (grid) của phần tử cha, đảm bảo giao diện nhất quán bất kể nội dung là gì.
Trong hướng dẫn này, chúng ta sẽ khám phá cách sử dụng CSS Subgrid để tạo ra một phần sản phẩm linh hoạt và đẹp mắt.
Hạn chế của CSS Grid
Việc thêm thuộc tính display: grid vào một phần tử chứa đồng nghĩa với việc chỉ các phần tử con trực tiếp của nó mới trở thành các phần tử của lưới (grid). Nếu các phần tử con trực tiếp này cũng có phần tử con, chúng sẽ không phải là một phần của lưới chính - do đó chúng sẽ hiển thị theo luồng thông thường.
Điều này gây ra vấn đề bởi vì nếu không có liên kết trực tiếp với nhau, mỗi phần tử con sẽ chiếm không gian mà nó cần và không quan tâm đến các phần tử "anh chị em" của nó. Điều này dẫn đến nội dung bị lệch như bạn có thể thấy ở bên trái của hình ảnh bên dưới.
Dự án mà chúng ta sẽ xây dựng sẽ khám phá một giải pháp Subgrid chỉ với một vài dòng mã CSS, giúp chúng ta đạt được sự căn chỉnh mong muốn như ở bên phải của hình ảnh trên.
Xây dựng phần Products với Subgrid
1. Điều kiện tiên quyết
- Kiến thức cơ bản về HTML và CSS (Để xem lại cách CSS Grid hoạt động, hãy xem bài viết trước của tôi về Web Layouts)
- Một IDE (trình soạn thảo văn bản)
- Một trình duyệt web
Vì trọng tâm của bài viết này là Subgrid, chúng ta sẽ không đi sâu vào mã HTML và CSS ban đầu. Chúng ta sẽ chỉ lướt qua nhanh để bạn có thể thiết lập. Sau đó, chúng ta sẽ đi sâu vào tìm hiểu cách thêm Subgrid.
2. Mã HTML
Trong tệp index.html của chúng ta, chúng ta sẽ tạo cấu trúc cơ bản của dự án bao gồm liên kết tệp CSS và Google Fonts - tất cả đều nằm trong thẻ <head>. Trong thẻ <body>, chúng ta sẽ tạo một phần tử chứa chính để chứa tất cả các thẻ. Tiếp theo, chúng ta sẽ tạo ba thẻ riêng lẻ dưới dạng các bài viết - mỗi thẻ có một biểu tượng, tiêu đề, văn bản và nút.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Inter:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <title>Ophy's Subgrid Products Cards</title>
</head>
<body> <div class="cards-container"> <article class="sedans"> <img src="./assets/icon-sedans.svg" alt="an icon showing a sedan vehicle"> <h3>Sedans</h3> <p> Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip in and out of town - let your imaginations run. </p> <button> Learn more </button> </article> <article class="suvs"> <img src="./assets/icon-suvs.svg" alt="an icon showing an suv vehicle"> <h3>SUVs</h3> <p> Take an SUV for its spacious interior, power, and versatility. </p> <button> Learn more </button> </article> <article class="luxury"> <img src="./assets/icon-luxury.svg" alt="an icon showing a luxury vehicle"> <h3> Extremely Luxurious </h3> <p> Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style. </p> <button> Learn more </button> </article> </div>
<footer> Ophy's Subgrid Products Cards | <a href="https://www.frontendmentor.io/">Design from Frontend Mentor </a>
</footer>
</body>
</html>
3. Mã CSS
Trong tệp style.css của chúng ta, trước tiên chúng ta sẽ đặt các kiểu toàn cục và kiểu cơ bản:
/* Global Resets */
* margin: 0; padding: 0; box-sizing: border-box;
/* Root Variables */
:root --primary-font: "Lexend Deca", sans-serif; --secondary-font: "Big Shoulders Display", sans-serif; --heading-color: #F2F2F2; --font-color: #FFF; --sedans-background: #E28625; --suv-background: #006971; --luxury-background: #004140; --heading-font-size: 2.5rem; --button-font-size: 0.9rem; --default-padding: 1rem 0;
/* Base Styles */
html font-size: 16px;
body font-family: var(--primary-font); margin: 0 auto; max-width: 920px;
/* Heading Styles */
h3 font-family: var(--secondary-font); color: var(--heading-color); font-size: var(--heading-font-size);
/* Paragraph Styles */
p font-family: var(--primary-font); font-optical-sizing: auto; font-weight: 200; color: var(--font-color); padding: var(--default-padding); line-height: 1.5;
/* Footer */ footer text-align: center; margin-top: 1.5rem; a text-decoration: none;
Tiếp theo, chúng ta sẽ tạo kiểu cho phần tử chứa chính của thẻ và nút. Lưu ý rằng chúng ta đã chỉ định cột và hàng cho phần tử chứa thẻ bằng cách sử dụng grid-template-columns và grid-template-rows.
/* Container */
.cards-container display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: repeat(4, auto); min-height: 31.25rem; margin-top: 10.688rem; button font-size: var(--button-font-size); background: var(--font-color); border: none; padding: 0.5rem 1.5rem; border-radius: 25px; width: 70%; &:hover cursor: pointer; background: none; color: var(--font-color); border: 1px solid var(--font-color); Sau đó, chúng ta sẽ tạo kiểu thẻ chung cũng như kiểu thẻ riêng lẻ.
/* All */
.suvs,
.sedans,
.luxury padding: 3rem; h3 font-size: var(--heading-font-size); text-transform: uppercase; /* Sedans */
.sedans background-color: var(--sedans-background); border-radius: 10px 0 0 10px; button color: var(--sedans-background); /* SUV */
.suvs background-color: var(--suv-background); button color: var(--suv-background); /* Luxury */
.luxury background-color: var(--luxury-background); border-radius: 0 10px 10px 0; button color: var(--luxury-background);
Hình ảnh bên dưới sẽ là kết quả sau khi chạy mã khởi động ở trên. Các thẻ đã được tạo dưới dạng các cột của lưới nhưng các hàng trong mỗi thẻ riêng lẻ không được căn chỉnh chính xác do sự khác biệt về độ dài nội dung.
Cách thức hoạt động của Subgrid
Màn hình hiển thị ở trên sẽ là một cơn ác mộng đối với các nhà thiết kế và các bên liên quan cho đến khi nó được khắc phục. Trước đây, để khắc phục điều này, các nhà phát triển cần biến những thẻ này thành các lưới lồng nhau. Nhưng đoạn mã đó cuối cùng sẽ trở nên lộn xộn và khó bảo trì.
CSS Subgrid cho phép một mục lưới kế thừa các rãnh lưới (hàng hoặc cột) của lưới cha, thay vì xác định rãnh lưới của riêng nó. Điều này đặc biệt hữu ích để duy trì sự căn chỉnh nhất quán giữa các lưới lồng nhau và lưới cha của chúng.
Trong dự án của chúng ta, thay vì xác định một hàng cho các biểu tượng, tiêu đề, văn bản và nút, chúng ta có thể khiến chúng kế thừa cùng một cấu trúc từ lưới cha của chúng (phần tử chứa thẻ).
Cách sử dụng Subgrid
Để tạo subgrid, hãy gán từ khóa làm giá trị cho grid-template-columns hoặc grid-template-rows của lưới lồng nhau.
Để triển khai điều này trong dự án của chúng ta, trước tiên chúng ta sẽ biến phần tử article thành một phần tử chứa lưới để đặt các phần tử con của nó trong một lưới có cấu trúc. Tiếp theo, grid-template-rows được cung cấp giá trị là subgrid. Điều này kế thừa cấu trúc hàng từ lưới của phần tử chứa thẻ.
Việc đặt grid-row thành span 4 về cơ bản có nghĩa là phần tử sẽ chiếm một không gian bao phủ 4 hàng của lưới cha.
article display: grid; grid-template-rows: subgrid; grid-row: span 4;
Mã tùy chọn
Mã bên dưới để định vị các phần tử bằng grid-row không cần thiết trong dự án này vì chúng ta đang sử dụng Subgrid một cách chính xác. Nhưng nó có thể hữu ích cho các bố cục phức tạp hơn khi bạn muốn kiểm soát rõ ràng vị trí của từng phần tử trong lưới.
img grid-row: 1/2; h3 grid-row: 2/3; p grid-row: 3/4; button grid-row: 4/5;
Khi subgrid được áp dụng, các thẻ của chúng ta sẽ được căn chỉnh hoàn hảo như được hiển thị trong hình ảnh bên dưới. Sự căn chỉnh này xảy ra vì các phần tử con trong mỗi thẻ (như tiêu đề, đoạn văn và nút) hiện chia sẻ cùng một cấu trúc lưới, được kế thừa từ phần tử cha. Chúng "nhận thức" được nhau và tự động điều chỉnh vị trí của mình để luôn đồng bộ.
Ví dụ: ngay cả khi tiêu đề cho Sedans và SUV ngắn hơn, lưới đảm bảo rằng các đoạn văn và nút của chúng bắt đầu trong cùng một hàng, duy trì tính nhất quán trên tất cả các thẻ. Điều này dẫn đến bố cục gọn gàng, có tổ chức hơn, trong đó mỗi phần tử được căn chỉnh bất kể độ dài nội dung khác nhau.
Trong bất kỳ trình duyệt hiện đại nào, hãy nhấp chuột phải vào trang web dự án và chọn inspect từ danh sách các tùy chọn. Hoặc sử dụng phím tắt (command + option + I trên Mac hoặc control + shift + I trên Windows) để mở tab Elements của DevTools.
Như bạn có thể thấy trong hình ảnh trên, giống như chúng ta có cho lưới, Subgrid cũng có một huy hiệu. Bật tắt nó để kiểm tra hoặc gỡ lỗi Subgrid. Nó bật một lớp phủ hiển thị các cột, hàng và số của chúng trên đầu phần tử trong khung nhìn.
Kết luận
Subgrid là một công cụ hữu ích để căn chỉnh bố cục - điều mà bạn phải làm thủ công trong quá khứ. Giờ đây, các lưới lồng nhau có thể kế thừa các thuộc tính như hàng và cột từ lưới cha của chúng. Điều này mở rộng khả năng của CSS Grid để tạo ra các thiết kế nhất quán và căn chỉnh hoàn hảo.
Nếu bạn đã bao giờ muốn tạo một vòng lặp CSS Grid bất tận chỉ để có được một thiết kế với nội dung có kích thước khác nhau để căn chỉnh hoàn hảo - thay vào đó, hãy sử dụng CSS Subgrid để làm cho mã của bạn gọn gàng hơn và dễ quản lý hơn. Cảm ơn các bạn đã theo dõi.