Trong hướng dẫn hôm nay, chúng ta sẽ xây dựng thanh điều hướng trên cùng bằng HTML và CSS. Chúng ta sẽ xem xét hai cách khác nhau để xây dựng thanh điều hướng này, một cách với flexbox và một cách khác với lưới CSS.
Đó sẽ là một cách tốt để so sánh sự khác biệt giữa hai cách tiếp cận. Và bạn có thể xem bạn thích phương pháp nào hơn.
Đây là giao diện của điều hướng đã hoàn thành:
Trên máy tính để bàn, tất cả các liên kết sẽ nằm trên cùng một hàng, với Trang chủ ở bên trái và các liên kết khác ở bên phải.
Sau đó, trên thiết bị di động, chúng ta sẽ có Trang chủ ở hàng trên cùng và các liên kết khác ở hàng dưới cùng. Và các liên kết sẽ được căn giữa trên trang.
Hãy bắt đầu bằng cách thiết lập tệp của chúng tôi.
Thiết lập tệp
Để tạo điều hướng, chúng tôi sẽ tạo một index.html tệp và một style.scss tệp mà chúng tôi sẽ biên dịch thành style.css bằng cách sử dụng tiện ích mở rộng VS Code Live Sass.
Trong <head> của chúng tôi chúng tôi sẽ thêm một <link> phần tử để tải style.css tệp.
Bây giờ chúng ta hãy bắt đầu xây dựng thanh điều hướng đó!
Tạo đánh dấu HTML
Trong index.html của chúng tôi , trước tiên hãy tạo mã đánh dấu HTML cho điều hướng. Tôi cố gắng sử dụng các thẻ HTML ngữ nghĩa nhiều nhất có thể, để tránh chỉ sử dụng div cho mọi thứ.
Chúng tôi sẽ tạo một <nav> phần tử này sẽ chứa tất cả các liên kết điều hướng của chúng tôi. Sau đó, chúng tôi sẽ đặt các liên kết trong một danh sách không có thứ tự <ul> phần tử như thế này:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Đây sẽ là đánh dấu điều hướng cơ bản để bắt đầu. Chúng tôi sẽ phải thực hiện một số chỉnh sửa khi xây dựng phiên bản flexbox và lưới, nhưng bạn có thể bắt đầu bằng cách chỉ tạo hai bản sao của <nav> này phần tử.
Nếu chúng tôi tải index.html trong trình duyệt, nó sẽ trông khá cơ bản.
Nhưng đừng lo lắng! Hãy bắt đầu thêm các kiểu của chúng ta trong style.scss tệp.
Bắt đầu thêm các truy vấn phương tiện và kiểu chung
Trước hết, tôi sẽ thêm một số kiểu toàn cầu mà tôi luôn cố gắng sử dụng:
html {
font-size: 100%;
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
min-height: 100vh;
}
*, *::before, *::after {
box-sizing: inherit;
}
Ngoài ra, hãy làm cho màu sắc thú vị hơn một chút. Trong <body> thẻ mà chúng tôi sẽ đặt background-color: #1b1b1b và đảm bảo tất cả các phần tử và <a> các liên kết có màu trắng với color: #ffffff vì vậy nó có chủ đề tối.
Sau đó, đối với <ul> phần tử trong <nav> ,:thêm list-style-type: none để ẩn dấu đầu dòng và đặt lề và đệm thành 0px .
Hãy cũng thêm một số phần đệm vào <nav> phần tử có padding: 10px và tăng khoảng đệm cho kiểu máy tính bảng và máy tính để bàn bằng cách sử dụng truy vấn phương tiện:
nav {
padding: 10px;
@media (min-width: 600px){
padding: 20px;
}
}Mọi thứ đang có vẻ tốt hơn! Thay vì phông chữ serif mặc định, tôi muốn sử dụng Phông chữ của Google, Open Sans.
Chúng tôi có thể nhập họ phông chữ vào style.scss của chúng tôi bằng cách thêm dòng này vào đầu:
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
Bây giờ trong các kiểu của chúng tôi cho <body> phần tử, chúng ta có thể đặt font-family: 'Open Sans', Arial, Helvetica, sans-serif để tải Open Sans hoặc phông chữ dự phòng.
Thêm kiểu liên kết với đường viền dưới gradient tuyến tính
Hãy cũng làm cho các kiểu liên kết thú vị hơn một chút.
Chúng tôi sẽ xóa gạch chân mặc định bằng cách đặt text-decoration: none tới <a> các yếu tố. Và tôi muốn thay thế nó bằng một gạch dưới màu hồng đậm hơn, sử dụng border-bottom . Tôi cũng sẽ tạo một đường gạch dưới gradient khi di chuột đến màu hồng đến tím.
Đối với màu sắc, tôi thích tạo các biến Sass. Ở đầu style.scss tệp dưới @import câu lệnh, thêm các biến sau:
$linkPink: rgb(216, 29, 216);
$linkPurple: rgb(98, 16, 250);Việc sử dụng các biến sẽ đơn giản hơn khi chúng tôi thêm màu vào các kiểu khác của mình.
Bây giờ, để tạo phần gạch chân dày hơn, chúng ta có thể sử dụng phần tử giả của <a> để có đường viền dưới cùng.
Đây là mã cho điều đó:
a {
position: relative;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
height: 3px;
right: 0px;
bottom: -3px;
left: 0px;
background-color: $linkPink;
}
Điều đang diễn ra ở đây là chúng tôi đang tạo ::before phần tử giả cao 3px và có nền màu hồng. Để đặt nó ở vị trí dưới cùng, chúng ta cần đặt nó thành position: absolute và đảm bảo <a> phần tử có position: relative để nó không bay lên trang. (Tôi giải thích thêm về hiện tượng này ở đây.)
Sau đó, để định vị phần tử giả bên dưới văn bản, chúng tôi đang đặt bottom: -3px vì vậy có một chút khoảng cách giữa văn bản liên kết và chính dòng. Và để làm cho dòng mở rộng toàn bộ chiều rộng của liên kết, chúng tôi đang sử dụng left: 0px và right: 0px .
Bây giờ các liên kết trông đẹp hơn một chút!
Kiểu di chuột qua gradient tuyến tính
Hãy bắt đầu thêm một cấp độ lạ mắt và thêm hiệu ứng di chuột thú vị. Những gì chúng tôi muốn là phần gạch chân chuyển sang màu chuyển từ hồng sang tím và văn bản liên kết chuyển từ trắng sang hồng khi bạn di chuột qua một liên kết.
Để thực hiện việc này, chúng tôi sẽ sử dụng a:hover bộ chọn với các kiểu sau:
a:hover {
color: $linkPink;
&::before {
background: linear-gradient(to right, $linkPink 40%, $linkPurple 75%);
}
}
Đối với ::before phần tử giả, nền bây giờ sẽ thay đổi thành linear-gradient . Trong hàm gradient, chúng tôi yêu cầu nó thay đổi từ màu hồng sang màu tím khi bạn di chuyển từ trái sang phải.
Và chúng tôi đang kiểm soát nơi gradient thay đổi theo tỷ lệ phần trăm. Chúng tôi muốn màu hồng đầu tiên đi từ 0% (ngoài cùng bên trái) sang 40% chiều rộng. Và chúng tôi muốn màu tím thứ hai đi từ 100% (ngoài cùng bên phải) sang 75% chiều rộng. Sau đó, sẽ có một gradient từ 40% đến 75% chiều rộng của phần tử.
Chúng tôi cũng đã thay đổi màu văn bản liên kết thành màu hồng khi di chuột.
Vì vậy, bây giờ khi bạn di chuột qua một liên kết, nó sẽ giống như sau:
Trông lạ mắt hơn phải không?
Được rồi, bây giờ chúng ta đã hoàn thành các kiểu chung mà chúng ta sẽ sử dụng cho cả thanh điều hướng khung và lưới.
Hãy bắt đầu viết các kiểu cho điều hướng flexbox.
Điều hướng Flexbox
Chia liên kết thành các nhóm con flex
Tôi thường bắt đầu bằng cách viết các kiểu dành cho máy tính để bàn trước, sau đó là đến thiết bị di động. Bởi vì máy tính để bàn thường phức tạp hơn với nhiều cột, trong khi trên thiết bị di động, mọi thứ có xu hướng được xếp chồng lên nhau trong một cột. Nhưng bạn có thể viết các phong cách của mình theo bất kỳ thứ tự nào phù hợp với bạn.
Trong điều hướng trên màn hình của chúng tôi, chúng tôi muốn liên kết Trang chủ ở bên trái và ba liên kết phụ khác cùng nhau ở bên phải.
Để thực hiện điều này với flexbox, chúng ta sẽ cần chia các liên kết thành hai nhóm:một cho các liên kết ở bên trái và nhóm còn lại cho các liên kết ở bên phải. Sau đó, cả hai nhóm sẽ là phần tử con linh hoạt của nhóm phụ huynh linh hoạt.
Quay lại đánh dấu HTML của chúng tôi, chúng tôi muốn <nav> là phần tử phụ huynh flex. Vì vậy, hãy di chuyển liên kết Trang chủ ra khỏi <ul> và đặt nó trở thành con trực tiếp của <nav> phần tử.
Sau đó, phần còn lại của các liên kết sẽ ở bên trong <ul> .
Cũng hãy thêm một lớp “flexbox” vào <nav> để giữ cho các kiểu flexbox của chúng tôi tách biệt với các kiểu lưới của chúng tôi sau này.
Đánh dấu được cập nhật sẽ trông giống như sau:
<nav class="flexbox">
<a href="#">Home</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>Thêm các kiểu flexbox cho máy tính để bàn
Bây giờ, trong điều hướng của chúng tôi, chúng tôi muốn bật flexbox bằng cách đặt nav.flexbox phần tử được display: flex . Sau đó, chúng tôi cũng sẽ thêm quy tắc justify-content: space-between để đặt nhóm đầu tiên ở bên trái và nhóm khác ở bên phải.
Tạo <ul> một phụ huynh flex khác với display: flex và sử dụng justify-content: flex-end để căn chỉnh các liên kết sang bên phải. Và chúng tôi sẽ thêm align-items: center; để căn giữa theo chiều dọc các phần tử con flex.
Trông đẹp hơn!
Bây giờ, chúng tôi muốn ba liên kết phụ cũng ở cạnh nhau theo một cách sắp xếp flexbox. Vì vậy, chúng tôi sẽ tạo <ul> phần tử cha flex cho ba liên kết và cũng đặt align-items: center . Chúng tôi cũng muốn thêm khoảng cách giữa các liên kết, vì vậy chúng tôi sẽ thêm margin-right: 20px nhưng đặt nó thành 0px cho :last-child bộ chọn. Điều này đảm bảo rằng liên kết cuối cùng sẽ không có thêm dung lượng.
Kiểu máy tính để bàn của chúng ta bây giờ sẽ giống như sau:
nav.flexbox {
display: flex;
justify-content: space-between;
align-items: center;
ul {
display: flex;
align-items: center;
}
ul li {
margin-right: 20px;
&:last-child {
margin-right: 0px;
}
}
}Và thanh điều hướng sẽ như thế này:
Thêm các kiểu flexbox cho điện thoại di động
Bây giờ, hãy thêm kiểu di động. Trước hết, hãy căn giữa nội dung linh hoạt trên thiết bị di động.
Ngay bây giờ trên thiết bị di động, liên kết Trang chủ được căn chỉnh ở bên trái vì justify-content: space-between quy tắc cho phần tử cha flex.
Chúng tôi có thể căn giữa nó bằng cách chuyển quy tắc kiểu đó vào một truy vấn phương tiện cho các chiều rộng lớn hơn. Sau đó, đặt justify-content đến center dành cho điện thoại di động.
Tiếp theo, chúng tôi muốn ba liên kết phụ chuyển sang một hàng mới, vì vậy hãy thêm flex-wrap: wrap vào nav.flexbox bộ chọn để bật gói.
Các kiểu sau đó sẽ giống như sau:
nav.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
@media (min-width: 600px){
justify-content: space-between;
}
}
Và để buộc gói, chúng tôi sẽ tạo <ul> Con flex chiếm 100% chiều rộng, vì vậy nó chỉ có thể vừa bằng cách di chuyển dưới liên kết Trang chủ.
Tôi thích sử dụng các lớp của trình trợ giúp, vì vậy chúng tôi đang thêm một lớp “full width” vào <ul> và tạo một số quy tắc kiểu cho .fullwidth bộ chọn trong nav.flexbox của chúng tôi quy tắc.
Đầu tiên, chúng tôi sẽ đặt flex: 1 0 100% . flex này thuộc tính viết tắt của ba thuộc tính flex:flex-grow , flex-shrink , flex-basis .
Chúng tôi sẽ cho phép nó phát triển nếu cần với flex-grow của 1. Và chúng tôi không cho phép nó thu nhỏ lại bằng flex-shrink là 0. Sau đó, chúng tôi đang đặt chiều rộng mặc định thành 100% bằng cách sử dụng flex-basis .
Chúng tôi cũng sẽ căn giữa các liên kết trong flex cha trên thiết bị di động, vì vậy chúng tôi sẽ thêm justify-content: center .
Tuy nhiên, chúng tôi không muốn các liên kết phụ có toàn bộ băng thông và tập trung cho máy tính bảng hoặc máy tính để bàn. Đối với chiều rộng thiết bị lớn hơn, chúng tôi muốn flex thuộc tính 0 1 auto vì vậy nó sẽ không phát triển, nó có thể thu nhỏ lại nếu cần và chiều rộng mặc định sẽ là bất kỳ chiều rộng tự nhiên của nội dung.
Hãy thêm một truy vấn phương tiện cho các kiểu máy tính để bàn:
.fullwidth {
flex: 1 0 100%;
justify-content: center;
@media (min-width: 600px){
flex: 0 1 auto;
}
}
Tôi cũng có thể đã viết một max-width truy vấn phương tiện để nhắm mục tiêu các quy tắc kiểu đầu tiên đó chỉ dành cho thiết bị di động. Nhưng tôi cố gắng sử dụng quy tắc kiểu dành cho thiết bị di động làm mặc định, sau đó thêm dần min-width lớn hơn truy vấn phương tiện để tránh xung đột.
Việc bạn sử dụng loại truy vấn phương tiện nào thực sự tùy thuộc vào bạn, nhưng tôi khuyên bạn nên chọn một loại (tối thiểu hoặc tối đa) để sử dụng hầu hết thời gian.
Ngoài ra, đối với ba liên kết phụ, tôi muốn đặt độ rộng của chúng để văn bản "Blog" được căn giữa dưới liên kết "Trang chủ". Ngay bây giờ, nó được căn giữa dựa trên tổng chiều rộng của các liên kết hàng thứ hai. Nhưng vì “Liên hệ” dài hơn một chút so với “Giới thiệu”, tâm của hàng hơi ở bên phải tâm của văn bản “Blog”.
Để khắc phục điều này, chúng tôi sẽ làm cho mỗi cột con linh hoạt trong hàng thứ hai có cùng chiều rộng tĩnh là 100px. Vì vậy, chúng tôi sẽ đặt một flex thuộc tính thành 0 0 100px và căn giữa văn bản. Chúng tôi chỉ muốn các quy tắc đó cho thiết bị di động, vì vậy chúng tôi sẽ hủy chúng cho máy tính để bàn bằng cách đặt flex thành 0 0 auto .
Cũng hãy giảm không gian giữa các mục đối với thiết bị di động xuống 10px và nó sẽ ở mức 20px đối với chiều rộng của máy tính để bàn.
Đây là mã cho tất cả những thứ đó sẽ trông như thế nào:
ul li {
flex: 0 0 100px;
margin-right: 10px;
text-align: center;
@media (min-width: 600px){
flex: 0 0 auto;
margin-right: 20px;
}
&:last-child {
margin-right: 0px;
}
}
Chỉnh sửa cuối cùng mà chúng tôi sẽ thực hiện là thêm một số khoảng trống giữa liên kết Trang chủ đầu tiên và ba liên kết phụ bằng margin-bottom cho điện thoại di động. Chúng tôi sẽ viết quy tắc kiểu nhắm mục tiêu đến <a> phần tử là phần tử con trực tiếp của nav.flexbox cha mẹ, vì vậy chỉ liên kết Trang chủ mới bị ảnh hưởng:
nav.flexbox {
> a {
margin-bottom: 10px;
@media (min-width: 600px){
margin-bottom: 0px;
}
}
}Dưới đây là giao diện của điều hướng trên thiết bị di động, khi trình kiểm tra flexbox của Firefox được bật, vì vậy bạn có thể thấy các dòng cho từng cột:
Và đó là điều hướng cho flexbox! Bây giờ chúng ta hãy chuyển sang xây dựng điều này chỉ bằng cách sử dụng lưới CSS.
Phương pháp lưới CSS
Một trong những điểm khác biệt chính giữa flexbox và lưới là với flexbox, việc sắp xếp các cột và hàng được xác định bởi các thuộc tính flex được đặt trên các phần tử con của flex trong flex thuộc tính và liệu cha mẹ flex có được đặt thành bao bọc hay không. Vì vậy, bạn có thể nói rằng flexbox tuân theo phương pháp tiếp cận “nội dung là trên hết”.
Với lưới CSS, đó là cách tiếp cận "lưới ưu tiên". Bạn thiết kế mẫu lưới của mình (nghĩa là các cột và hàng) bằng cách sử dụng các thuộc tính lưới trong phần tử mẹ. Và bạn có thể kiểm soát riêng vị trí đặt các phần tử con của lưới trong mẫu lưới đó.
Do mức độ kiểm soát riêng lẻ này, trong thanh điều hướng lưới CSS của chúng tôi, chúng tôi có thể đặt tất cả các liên kết bao gồm cả liên kết Trang chủ đầu tiên, trong cùng một cấp độ gốc <ul> .
<nav class="grid">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>Thêm kiểu lưới cho điện thoại di động
Hãy thay đổi nó với điều hướng lưới của chúng tôi và bắt đầu bằng cách viết các kiểu di động trước!
Trên thiết bị di động, chúng tôi muốn liên kết Trang chủ nằm trên hàng đầu tiên, chiếm 100% chiều rộng. Sau đó, chúng tôi muốn ba liên kết phụ nằm trên hàng thứ hai và được căn giữa.
Trong <ul> của chúng tôi phần tử gốc lưới, chúng tôi sẽ bật lưới bằng cách đặt display: grid .
Bây giờ, hãy thiết kế mẫu lưới của chúng tôi. Vì sẽ có ba liên kết trên hàng thứ hai, hãy tạo một mẫu ba cột.
Tôi muốn tạo tất cả các cột có cùng chiều rộng, nhưng tôi không muốn chúng quá rộng. Vì vậy, hãy đặt grid-template-columns: repeat(3, 100px) trên <ul> lưới mẹ.
Chúng tôi đang sử dụng repeat() chức năng tạo ba cột có chiều rộng 100px.
Một tính năng hữu ích khác của lưới CSS là khả năng tạo rãnh (khoảng trống) giữa các mục lưới. Vì vậy, thay vì phải thêm lề vào lưới con như trong flexbox, chúng ta có thể chỉ cần đặt grip-gap: 10px .
Chúng tôi cũng có thể căn giữa toàn bộ lưới trên trang bằng justify-content: center và căn giữa văn bản trong mỗi cột bằng justify-items: center .
Khi chúng tôi bật trình kiểm tra lưới của Firefox (nhân tiện, nó thực sự tuyệt vời, nếu bạn chưa thử), lưới sẽ trông như thế này:
Chúng ta có thể thấy rõ ràng lưới ba cột được căn giữa, nhưng liên kết Trang chủ cần phải nằm trên hàng của chính nó. Chúng tôi muốn nó chiếm ba cột chiều rộng.
Để thực hiện việc này, chúng tôi sẽ sử dụng lại một lớp người trợ giúp, thêm một lớp “full width” vào Trang chủ <li> phần tử.
Theo phong cách của chúng tôi, chúng tôi sẽ cung cấp .fullwidth bộ chọn quy tắc kiểu của grid-column: 1 / 4 . Điều này sẽ làm cho cột con của lưới đó bắt đầu ở đường lưới dọc đầu tiên và kéo dài đến đường lưới thứ tư ở cuối.
Đây là giao diện của nó và chúng tôi đã bật số dòng để bạn có thể thấy chúng được đánh số như thế nào:
Thêm kiểu lưới cho máy tính để bàn
Đối với máy tính để bàn, chúng tôi muốn tất cả các liên kết nằm trên một hàng. Và một lần nữa, chúng tôi muốn liên kết Trang chủ ở bên trái, sau đó ba liên kết khác ở bên phải.
Tôi cũng muốn đặt mỗi cột trong số ba cột cuối cùng bằng kích thước của nội dung mà nó chứa. Điều này sẽ đảm bảo có cùng một lượng không gian giữa các liên kết.
Tất cả điều này có nghĩa là chúng tôi sẽ cần thay đổi mẫu lưới để có chiều rộng thiết bị lớn hơn, sử dụng truy vấn phương tiện.
Vì vậy, những gì chúng ta nên thay đổi mẫu thành? Chúng tôi muốn tất cả các liên kết trên cùng một hàng, vì vậy chúng tôi sẽ muốn có một lưới bốn cột.
Để chỉ thực hiện đúng một bước, hãy bắt đầu bằng cách thiết lập thay đổi grid-template-columns thuộc tính từ một repeat(3, 100px) thành repeat(4, 100px) trên lưới cha cho chiều rộng lớn hơn 600px.
Thao tác này sẽ tạo ra bốn cột và sau đó chúng ta có thể tiếp tục điều chỉnh nó.
Ngoài ra, hãy cập nhật .fullwidth kiểu để nó chỉ chiếm một cột trên máy tính để bàn, bằng cách đặt grid-column: 1 / 2 . Điều này sẽ làm cho cột Trang chủ đầu tiên chỉ kéo dài từ đường lưới 1 đến đường lưới 2.
Đây là những gì chúng tôi có cho đến nay:
Các liên kết nằm trong bốn cột, nhưng vì chúng đều rộng 100px nên chúng chỉ được căn giữa trên trang.
Để tạo liên kết Trang chủ đầu tiên ở bên trái, chúng ta cần tạo lưới chiếm 100% chiều rộng của trang. Và để làm điều đó, chúng tôi có thể chỉ làm cho cột đầu tiên đó trong mẫu lưới chiếm bất kỳ không gian có sẵn nào.
Vì vậy, việc thay đổi grid-template-columns để lặp lại 1fr repeat(3, 100px) sẽ để lại ba liên kết phụ có chiều rộng 100px. Và cột đầu tiên sẽ chiếm phần còn lại của không gian.
Hãy xem nó trông như thế nào:
Đến đó! Tuy nhiên, để làm cho ba cột cuối cùng chỉ rộng bằng nội dung của chúng, chúng tôi sử dụng fit-content() chức năng. Nếu chúng tôi đặt ba cột cuối cùng thành fit-content(50px) thì các cột sẽ có kích thước riêng để phù hợp với nội dung.
Vì vậy, grid-template-columns của chúng tôi thuộc tính cho máy tính để bàn bây giờ sẽ là 1fr repeat(3, fit-content(50px)) .
Chiều rộng cột trông đẹp!
Bây giờ chúng ta hãy bắt đầu căn chỉnh văn bản liên kết trong các cột. Ngay bây giờ chúng được căn giữa do justify-items: center quy tắc mà chúng tôi đã sử dụng cho thiết bị di động.
Hãy thay đổi điều đó cho máy tính để bàn thành justify-items: end để căn chỉnh các liên kết sang bên phải. Sau đó, chúng ta có thể căn chỉnh liên kết Trang chủ sang bên trái bằng cách đặt justify-self: start cho .fullwidth bộ chọn.
Bây giờ chúng ta có thể thấy điều hướng màn hình hoàn chỉnh cho lưới và nó khớp với điều hướng flexbox:
Flexbox hay Grid?
Trong việc xây dựng điều hướng này, các kiểu flexbox đã sử dụng 46 dòng mã trong style.scss của chúng tôi để viết và đánh dấu HTML phức tạp hơn một chút.
Các kiểu lưới mất 24 dòng mã mỏng để viết! Có rất nhiều sự khác biệt là do chúng tôi phải thêm margin-bottom và margin-right quy tắc kiểu để thêm khoảng cách giữa các mục trên flexbox. Và trong lưới tất cả đã được xử lý với grid-gap tài sản.
Cá nhân tôi thực sự thích mã nhẹ cần thiết cho lưới CSS. Nhưng flexbox chắc chắn vẫn là một lựa chọn tốt nếu bạn cảm thấy thoải mái hơn với flexbox!
Bạn có thể xem mã nguồn tại đây trên Codepen.