Fluid layout là gì?
Còn gọi: bố cục co giãn
Fluid layout là bố cục dùng đơn vị tương đối như phần trăm để các cột và khối nội dung co giãn liên tục theo độ rộng màn hình, thay vì giữ kích thước pixel cố định.
Hiểu kỹ hơn
Trong bố cục co giãn, nếu sidebar chiếm 25% và nội dung chiếm 75% thì tỉ lệ đó giữ nguyên trên mọi màn hình. Cách này tận dụng hết không gian, nhưng nếu chỉ co giãn mà không có breakpoint thì trên màn hình rất hẹp các cột bị bóp méo, còn trên màn hình rất rộng dòng chữ quá dài. Vì vậy thiết kế responsive hiện đại kết hợp lưới co giãn, ảnh co giãn và breakpoint để đổi cấu trúc, cùng max-width để chặn độ rộng tối đa, thêm các hàm CSS như clamp() để cỡ chữ cũng co giãn có giới hạn. Trong Figma, có thể mô phỏng tính co giãn bằng auto layout với Fill container, layout grid kiểu Stretch và constraints Left and right, rồi kéo rộng frame để kiểm tra. Ví dụ: lưới ảnh trên trang thư viện tự giãn khi kéo rộng cửa sổ trình duyệt. Lỗi thường gặp là để đoạn văn giãn hết chiều rộng màn hình 27 inch, mỗi dòng hơn 150 ký tự.
