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