Khi xây dựng một ứng dụng web, một trong những điều đầu tiên cần thiết là cách bố trí nội dung của ứng dụng.
Rất nhiều nhà thiết kế sử dụng lưới tưởng tượng để bố trí nội dung, cho dù đó là cho trang web hay ứng dụng. Nhóm CSS đã nỗ lực làm cho bố cục dễ dàng hơn và là một phần trong số đó đã 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.
Tính năng này hiện có thể dùng thử trong Chrome sau một 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ó trên 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
- 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ị trong vùng chứa lưới
- Bố cục có thể thay đổi dựa trên các cụm từ tìm kiếm về nội dung nghe nhìn, giúp thiết kế thích ứng dễ dàng hơn
- Nội dung có thể trùng lặp (bật bố cục mà các phương pháp khác không thực hiện được)
- Bố cục lưới nhanh
Sau đâ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 (xem trang trình bày tại đây:
Dùng thử
Giờ đây, việc sử dụng bố cục lưới CSS trong Chrome đã trở nên thật dễ dàng. Điều đầu tiên bạn cần làm là 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 cuộn xuống lựa chọn Bật các tính năng thử nghiệm của Nền tảng web như minh hoạ dưới đây:
Bạn chỉ cần nhấp vào Enable (Bật) để bật cờ và bạn sẽ thấy lời nhắc khởi động lại trình duyệt như sau:
Bây giờ, chỉ cần nhấp vào nút Khởi động lại ngay để khởi động lại trình duyệt của bạn và bạn sẽ 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 yếu tố cơ bản mới tuyệt vời dành cho nội dung web, nhưng như thường lệ, chúng ta đều muốn biết ý kiến của các nhà phát triển về nó. Có rất nhiều cách để đưa ra phản hồi – hãy để lại nhận xét tại đây, gửi thư đến danh sách Nhóm làm việc CSS W3C với "[css-grid]" trong dòng tiêu đề, nhật ký lỗi hoặc blog và tweet những gì bạn nghĩ về nó. Chúng tôi rất mong được thấy bố cục tuyệt vời mà bạn xây dựng với tính năng mới cực kỳ hữu ích này.