TL;DR
Nếu bạn đã quen thuộc với Flexbox (Hộp linh hoạt), thì Grid sẽ quen thuộc với bạn. Rachel Andrew duy trì một trang web tuyệt vời dành riêng cho CSS Grid để giúp bạn bắt đầu. Đã có lưới trong Google Chrome.
Hộp linh hoạt? Lưới?
Trong vài năm qua, CSS Flexbox đã được sử dụng rộng rãi và khả năng hỗ trợ cho trình duyệt rất hiệu quả (trừ phi bạn là một trong những người phải hỗ trợ IE9 trở xuống). Hộp linh hoạt giúp dễ dàng thực hiện nhiều tác vụ bố cục phức tạp hơn, chẳng hạn như khoảng cách bằng nhau giữa các phần tử, bố cục từ trên xuống dưới hoặc trình hướng dẫn CSS: căn giữa theo chiều dọc.
Nhưng than ôi, màn hình thường có kích thước thứ hai mà chúng ta cần lo ngại. Khi phải tự xác định kích thước các thành phần, đáng tiếc là bạn không thể cả lẫn nhịp điệu dọc và ngang khi chỉ sử dụng flexbox. Đây chính là lúc CSS Grid sẽ cứu nguy.
CSS Grid đang trong quá trình phát triển, sau một cờ trong hầu hết các trình duyệt trong hơn 5 năm và chúng tôi đã dành thêm thời gian cho khả năng tương tác để tránh việc chạy lỗi như Flexbox. Vì vậy, nếu bạn sử dụng Grid để triển khai bố cục trong Chrome, có thể bạn sẽ nhận được kết quả tương tự trong Firefox và Safari. Tại thời điểm viết bài này, cách triển khai Lưới của Microsoft đã lỗi thời (tương tự như cách đã có trong IE11.) và bản cập nhật này là "đang được xem xét".
Mặc dù có sự tương đồng về khái niệm và cú pháp, đừng coi Flexbox và Grid là kỹ thuật bố cục cạnh tranh. Lưới bố trí theo 2 chiều, còn Hộp linh hoạt bố trí một chiều. Sự kết hợp ăn ý khi kết hợp cả hai.
Xác định lưới
Để làm quen với các thuộc tính riêng lẻ của Grid, tôi đặc biệt đề xuất Grid By Example của Rachel Andrew hoặc Bản tóm tắt về các mẹo của CSS. Nếu bạn đã quen thuộc với Flexbox, thì nhiều thuộc tính và ý nghĩa của chúng có thể cũng quen thuộc.
Hãy cùng tìm hiểu bố cục lưới tiêu chuẩn gồm 12 cột. Bố cục 12 cột cổ điển phổ biến vì số 12 có thể chia hết cho 2, 3, 4 và 6, do đó, hữu ích cho nhiều thiết kế. Hãy triển khai bố cục này:
Hãy bắt đầu với mã đánh dấu của chúng tôi:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
Trong biểu định kiểu, chúng ta bắt đầu bằng cách mở rộng body để bao phủ toàn bộ khung nhìn và chuyển khung nhìn thành một vùng chứa lưới:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Hiện chúng tôi đang sử dụng Lưới CSS. Thật tuyệt!
Bước tiếp theo là triển khai các hàng và cột của lưới. Chúng tôi có thể triển khai tất cả 12 cột trong bản minh hoạ của mình, nhưng vì chúng tôi không sử dụng tất cả các cột, việc này sẽ khiến CSS của chúng tôi trở nên lộn xộn một cách không cần thiết. Để đơn giản, chúng ta sẽ triển khai bố cục theo cách sau:
Đầu trang và chân trang có chiều rộng khác nhau và nội dung có thể thay đổi ở cả hai kích thước. Thành phần điều hướng cũng sẽ thay đổi ở cả hai kích thước, nhưng chúng ta sẽ áp dụng chiều rộng tối thiểu là 200px cho nó. (Tại sao? Tất nhiên là để giới thiệu các tính năng của Lưới CSS.)
Trong Lưới CSS, tập hợp các cột và hàng được gọi là theo dõi. Hãy bắt đầu với việc xác định tập hợp kênh đầu tiên của chúng ta, các hàng:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows lấy một chuỗi kích thước xác định từng hàng riêng lẻ.
Trong trường hợp này, chúng ta cung cấp chiều cao cho hàng đầu tiên là 150px và hàng cuối cùng là 100px.
Hàng ở giữa được đặt thành auto, tức là hàng này sẽ điều chỉnh theo chiều cao cần thiết để chứa các mục trong lưới (phần tử con của vùng chứa lưới) trong hàng đó. Vì phần nội dung của chúng ta được kéo giãn trên toàn bộ khung nhìn, nên bản nhạc chứa nội dung (màu vàng trong hình ở trên) ít nhất sẽ lấp đầy tất cả không gian có sẵn, nhưng sẽ mở rộng (và làm cho tài liệu cuộn) nếu cần.
Đối với các cột, chúng ta muốn áp dụng phương pháp linh hoạt hơn: chúng ta muốn cả vùng điều hướng và nội dung tăng (và thu nhỏ), nhưng chúng ta muốn vùng điều hướng không bao giờ thu nhỏ dưới 200px và chúng ta muốn nội dung lớn hơn vùng điều hướng. Trong Flexbox, chúng ta sẽ dùng flex-grow và flex-shrink, nhưng trong Grid thì hơi khác một chút:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Chúng ta đang xác định 2 cột. Cột đầu tiên được xác định bằng hàm minmax(), nhận 2 giá trị: kích thước tối thiểu và tối đa của bản nhạc đó.
(Cũng giống như min-width và max-width trong một.) Chiều rộng tối thiểu là 200px như chúng tôi đã thảo luận trước đó. Chiều rộng tối đa là 3fr. fr là một đơn vị dành riêng cho lưới cho phép bạn phân phối không gian có sẵn cho các phần tử lưới. fr có thể là viết tắt của "fraction unit", nhưng cũng có thể có nghĩa là "đơn vị miễn phí" trong tương lai.
Giá trị của chúng ta ở đây có nghĩa là cả hai cột sẽ mở rộng để lấp đầy màn hình, nhưng cột nội dung sẽ luôn rộng gấp 3 lần cột điều hướng (miễn là cột điều hướng vẫn rộng hơn 200px).
Mặc dù vị trí của các mục trong lưới của chúng ta chưa chính xác, nhưng kích thước của hàng và cột vẫn hoạt động chính xác và tạo ra hành vi mà chúng ta muốn:
Đặt các mục
Một trong những tính năng mạnh mẽ nhất của Grid là có thể đặt các mục mà không cần xem xét đến thứ tự DOM. (Mặc dù, vì trình đọc màn hình điều hướng DOM,
nên để có thể truy cập đúng cách, bạn nên lưu ý đến cách
sắp xếp lại các phần tử.) Nếu không đặt vị trí thủ công, các phần tử sẽ được đặt trong Lưới theo thứ tự DOM, sắp xếp từ trái sang phải và từ trên xuống dưới. Mỗi phần tử chứa một ô. Bạn có thể thay đổi thứ tự điền lưới bằng cách sử dụng grid-auto-flow.
Vậy chúng ta đặt các phần tử như thế nào? Có thể cách dễ nhất để đặt các mục trong lưới là bằng cách xác định những cột và hàng mà chúng bao phủ. Grid cung cấp 2 cú pháp để thực hiện việc này: Trong cú pháp đầu tiên, bạn đã xác định điểm bắt đầu và điểm kết thúc. Trong phần thứ hai, bạn sẽ xác định điểm bắt đầu và khoảng (span):
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Chúng ta muốn tiêu đề bắt đầu ở cột đầu tiên và kết thúc trước cột thứ 3. Thành phần điều hướng của chúng ta nên bắt đầu ở hàng thứ hai và kéo dài tổng cộng 2 hàng.
Về mặt kỹ thuật, chúng ta đã triển khai xong bố cục, nhưng tôi muốn cho bạn thấy một số tính năng tiện lợi mà Grid cung cấp để giúp bạn đặt vị trí dễ dàng hơn. Tính năng đầu tiên là bạn có thể đặt tên cho đường viền của bản nhạc và dùng những tên đó cho vị trí:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
Mã ở trên sẽ tạo ra bố cục giống như mã trước đó.
Hơn nữa, tính năng đặt tên cho toàn bộ các khu vực trong lưới:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas nhận một chuỗi tên được phân tách bằng dấu cách, cho phép nhà phát triển đặt tên cho từng ô. Nếu 2 ô liền kề có cùng tên, các ô đó sẽ được hợp nhất thành cùng một khu vực. Bằng cách này, bạn có thể cung cấp thêm ngữ nghĩa cho mã bố cục và giúp các truy vấn nội dung nghe nhìn trực quan hơn. Xin nhắc lại, mã này sẽ tạo bố cục giống như trước đây.
Có thêm không?
Vâng, có, quá nhiều thứ để trình bày trong một bài đăng trên blog. Rachel Andrew, cũng là GDE, là Chuyên gia được mời trong Nhóm hoạt động CSS và đã làm việc với họ ngay từ đầu để đảm bảo Grid đơn giản hoá thiết kế web. Cô thậm chí còn viết một sách trên đó. Trang web Grid By Example của cô ấy là một tài nguyên hữu ích để làm quen với Grid. Nhiều người nghĩ rằng Lưới là một bước cách mạng cho thiết kế web và tính năng này hiện đã được bật theo mặc định trong Chrome để bạn có thể bắt đầu sử dụng ngay hôm nay.