Tính đến thời điểm này, gần 85% hỗ trợ grid layout và gần 95% hỗ trợ flexbox. Bày biện research cho sang chảnh, những con số chả ý nghĩa gì mấy. Thực tế là mỗi thằng có cái hay riêng và người ta vẫn có thể dùng lẫn lộn.

Tùy theo yêu cầu thiết kế mà lựa chọn cho phù hợp thôi.

Trình bày trang web tạng card-based, nếu để bài viết (card) giống hệt nhau nhìn rất nhàm. Giải pháp ưa thích của tao là dùng masonry, isotop, pakery. Trang này không áp dụng, bởi vì cảm thấy không cần thiết.

flex có tính năng flex-grow hợp với layout tạng card-based. Khi số lượng card sắp xếp bị lẻ dòng, thì những cái cuối cùng sẽ tự động điều chỉnh chiều rộng của nó để lấp đầy khoảng trống còn lại. Cái này css-grid không xử lý được.

Đây là layout trang web trên desktop

tham khảo:

• css battle - css grid vs flexbox
• graphic guide to css grid
• graphic guide to flexbox
• 107 mẫu thiết kế content card tuyệt đẹp
• magic of auto margin in flexbox