𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
Đừng phải vật lộn với bố cục CSS của bạn nữa.
Tôi từng mất hàng giờ đồng hồ để sửa các bố cục bị lỗi với Flexbox. Tôi cố gắng bọc các phần tử trong một hàng, nhưng phần tử cuối cùng lại kéo dài hết cả màn hình. Trông nó rất kỳ cục. Tôi đã thử dùng margin và các mẹo khác nhau, nhưng chẳng có gì hiệu quả.
Sau đó, tôi đã thay đổi tư duy sang CSS Grid.
Sự khác biệt rất đơn giản:
- Flexbox dành cho bố cục một chiều. Hãy dùng nó cho một hàng hoặc một cột duy nhất.
- CSS Grid dành cho bố cục hai chiều. Hãy dùng nó khi bạn cần kiểm soát cả hàng và cột cùng một lúc.
Hãy coi Flexbox là công cụ cho các tác vụ nhỏ. Hãy coi Grid là công cụ cho toàn bộ cấu trúc trang của bạn.
Cạm bẫy Flexbox: Khi bạn dùng Flexbox cho một gallery, các phần tử có thể không căn chỉnh hoàn hảo trên mọi kích thước màn hình. Bạn thường gặp phải các phần tử "mồ côi" làm phá vỡ nhịp điệu thiết kế của mình.
Giải pháp Grid: Với Grid, bạn có thể tạo các gallery responsive chỉ với một dòng mã.
Hãy dùng mã này: display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Dòng này yêu cầu trình duyệt hiển thị càng nhiều cột 250px càng tốt. Trình duyệt sẽ tự tính toán giúp bạn. Không còn phải đoán mò. Không còn các hàng bị lỗi.
Ví dụ về Dashboard: Xây dựng một dashboard với sidebar, nội dung chính và footer rất khó nếu dùng Flexbox. Bạn thường phải dùng các container lồng nhau và mã nguồn lộn xộn để làm cho footer trải dài hết chiều rộng.
Với Grid, bạn chỉ cần định nghĩa các track một lần: grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;
Bạn có thể yêu cầu footer trải dài từ cột đầu tiên đến cột cuối cùng chỉ bằng một câu lệnh. Mã nguồn của bạn sẽ trở nên sạch sẽ và dễ đọc hơn.
Lời khuyên của tôi:
• Dùng Flexbox cho các căn chỉnh đơn giản trong header hoặc các nút bấm.
• Dùng Grid cho bố cục trang chính và các gallery phức tạp.
• Đừng lồng các container chỉ để sửa một lỗi bố cục.
• Sử dụng đơn vị fr để phân bổ không gian một cách dễ dàng.
Hãy thử ngay hôm nay. Lấy một component cũ mà bạn đã xây dựng bằng Flexbox. Viết lại nó bằng CSS Grid. Bạn sẽ thấy mã nguồn của mình ngắn hơn và bố cục trở nên vững chắc hơn.