Thanh bên + Bố cục lưới CSS nội dung
Thiết kế bố cục Lưới CSS một cách trực quan: đặt cột, hàng và khoảng cách, sau đó nhập tên vùng vào các ô để tạo vùng mẫu lưới — với bản xem trước trực tiếp cũng như CSS và HTML có thể sao chép.
kết quả
Trang này mở trình tạo lưới với bố cục hai cột, một hàng đã được đặt tên: cột thanh bên 200px bên cạnh cột nội dung linh hoạt chiếm không gian còn lại. Cả hai khu vực đều hiển thị ngay lập tức trong bản xem trước trực tiếp, được tô màu và gắn nhãn để có thể nhìn thấy ngay sự phân chia.
Đây là hình dạng điều hướng cộng với nội dung phổ biến nhất trên web — các trang cài đặt, trang tài liệu và bảng thông tin quản trị viên đều dựa trên một thanh ray có chiều rộng cố định bên cạnh khu vực chính linh hoạt. Vì cột thanh bên sử dụng giá trị pixel và cột nội dung sử dụng 1fr nên thanh bên giữ nguyên chiều rộng không đổi trong khi cột nội dung hấp thụ mọi pixel bổ sung của khung nhìn.
Đổi tên một trong hai khu vực, thay đổi độ rộng cột hoặc thêm nhiều hàng hơn cho tiêu đề phía trên phần phân tách — đầu ra CSS và HTML bên dưới theo dõi mọi chỉnh sửa trong thời gian thực. Công cụ này miễn phí và tiếp tục hoạt động hoàn toàn trong trình duyệt của bạn, không cần tải lên và không cần tài khoản.