Tạo lưới Grid, Flexbox trực quan

Chọn Grid hoặc Flexbox, đổi số cột, khoảng cách, cách căn và thấy bố cục đổi theo ngay. Chép mã CSS dùng cho web hoặc WordPress.

Cách dùng

Chọn Grid để xếp ô theo lưới cột, hoặc Flexbox để xếp theo một hàng hay một cột.
Đổi số cột, khoảng cách và cách căn. Khung bên phải đổi theo ngay.
Bấm Chép mã rồi dán vào file CSS, gắn lớp layout cho khối cha.

Khi nào dùng Grid, khi nào dùng Flexbox?

Grid hợp với bố cục 2 chiều như lưới sản phẩm, thẻ bài viết. Flexbox hợp với 1 hàng hoặc 1 cột như thanh menu, hàng nút.

Dùng trong WordPress thế nào?

Thêm lớp layout vào khối Nhóm ở mục Nâng cao, rồi dán mã vào phần CSS bổ sung của giao diện.

Trên điện thoại có tự xuống dòng không?

Flexbox bật Tự xuống dòng thì có. Với Grid, nên giảm số cột ở màn nhỏ bằng một đoạn media query.