Khi xây dựng Ứng dụng web, một trong những điều đầu tiên cần thiết là cách sắp xếp nội dung của ứng dụng.
Nhiều nhà thiết kế sử dụng lưới ảo để bố trí nội dung, cho dù đó là trang web hay ứng dụng. Nhóm CSS đã nỗ lực để xây dựng bố cục dễ dàng hơn và tạo ra Mô-đun bố cục lưới CSS hiện đang xuất hiện trong các trình duyệt.
Bạn có thể dùng thử tính năng này trong Chrome sau cờ thử nghiệm. Tính năng này cũng được triển khai trong IE kể từ phiên bản 10 và có thể sẽ sớm được triển khai trong hầu hết các trình duyệt.
Tóm tắt chung
- Bố cục lưới CSS cho phép bạn xác định các hàng và cột cho bố cục của mình
- Lưới có thể điều chỉnh để tận dụng không gian có sẵn
- Thứ tự nội dung có thể độc lập với thứ tự hiển thị vùng chứa lưới
- Bố cục có thể thay đổi dựa trên các truy vấn phương tiện, giúp thiết kế đáp ứng dễ dàng hơn
- Nội dung có thể chồng chéo (bật bố cục mà các phương pháp khác không thể thực hiện)
- Bố cục lưới nhanh chóng
Đây là video tổng quan giải thích nhiều về cách hoạt động của Bố cục lưới CSS (có các trang trình bày ở đây:
Dùng thử
Giờ đây, bạn có thể dễ dàng sử dụng Bố cục lưới CSS trong Chrome. Trước tiên, bạn cần bật cờ thử nghiệm để bật tính năng này.
Trước tiên, hãy tải URL chrome://flags rồi di chuyển xuống mục Bật các tính năng thử nghiệm của Nền tảng web như sau:
Chỉ cần nhấp vào Bật để bật cờ và bạn sẽ thấy lời nhắc khởi động lại trình duyệt giống như sau:
Bây giờ, chỉ cần nhấp vào nút Khởi chạy lại ngay để khởi động lại trình duyệt và bạn đã sẵn sàng dùng thử Bố cục lưới CSS.
Hãy chia sẻ với chúng tôi cảm nhận của bạn
Bố cục lưới CSS là một bố cục mới tuyệt vời cho nội dung web, nhưng như thường lệ, tất cả chúng ta đều muốn biết suy nghĩ của nhà phát triển. Có rất nhiều cách để đưa ra ý kiến phản hồi – hãy để lại nhận xét tại đây, gửi thư đến danh sách Nhóm hoạt động CSS W3C kèm theo cụm từ "[css-grid]" ở dòng tiêu đề, ghi nhật ký lỗi hoặc đăng blog và tweet ý kiến của bạn. Chúng tôi rất mong được thấy những bố cục tuyệt vời mà bạn xây dựng bằng tính năng mới cực kỳ hữu ích này.