Trình Tạo Bố Cục CSS

Thiết kế layout Flexbox và CSS Grid hoàn toàn bằng chuột qua giao diện trực quan.
Chỉnh sửa thông số và thấy ngay kết quả trên màn hình, dễ dàng chép code bỏ vào dự án.

📐

Flexbox

Tạo bố cục 1 chiều

⊞

CSS Grid

Tạo bố cục 2 chiều

⚡

Thời gian thực

Xem trước tức thời

⚠️ Vui lòng bật JavaScript để sử dụng công cụ này.

auto_awesome Mẫu có sẵn

settings_suggest Trình tạo

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

visibility 📐 Xem trước Kéo thả viền dưới của khung để thay đổi chiều cao

code Mã Code

about,

📖 Giới thiệu

Đây là một công cụ web tuyệt vời giúp bạn tạo bố cục CSS Flexbox và CSS Grid một cách trực quan bằng giao diện đồ họa. Bạn có thể tự do lên ý tưởng, điều chỉnh các thông số và thiết kế các giao diện phức tạp mà không cần gõ từng dòng CSS.

Công cụ hỗ trợ mọi thuộc tính quan trọng của Flexbox (justify-content, align-items, flex-wrap...) lẫn CSS Grid (grid-template-columns, gap...). Mọi thao tác kéo thả và điều chỉnh số liệu của bạn sẽ hiển thị ngay ở màn hình xem trước (Real-time preview).

Toàn bộ quá trình tính toán và sinh code đều diễn ra trên trình duyệt của máy tính bạn. Không có bất kỳ dữ liệu nào bị gửi đi, đảm bảo tính bảo mật và tốc độ tuyệt đối.

howto,

🔰 Cách sử dụng

Lựa chọn chế độ

Trước hết hãy quyết định xem bạn muốn dùng sức mạnh của "Flexbox" hay "CSS Grid". Bạn có thể tham khảo từ các Mẫu có sẵn (Presets) ở ngay bên dưới nút chọn nếu lười nghĩ.

Tinh chỉnh thông số

Chỉnh sửa thông số của khối bao ngoài (Container) và thêm sửa các khối con bên trong (Items). Bạn có thể thử đổi flex-grow hoặc grid-column để xem bố cục biến đổi ra sao trên khung Xem trước (Preview) bên phải.

Sử dụng mã được tạo

Nếu ưng ý, hãy cuộn xuống khu vực Mã Code phía dưới. Tại đây chúng tôi đã viết sẵn cả file HTML và CSS. Copy và nhúng vào mã nguồn thực tế của bạn thôi!

glossary,

📚 Thuật ngữ

Flexbox: Là module dàn trang của CSS3. Vô cùng hữu hiệu để sắp xếp đối tượng theo bố cục 1 chiều (hàng ngang hoặc cột dọc). Rất hay được dùng cho làm menu (nav), dải nút bấm hay danh sách Card.
CSS Grid: Cũng là module dàn trang của CSS3 nhưng quyền lực hơn, dùng để sắp xếp đối tượng theo bố cục 2 chiều (cùng lúc quản lý cả hàng ngang và cột dọc). Rất thích hợp để chia khối trang web lớn.
justify-content: Thuộc tính thần thánh dùng để quyết định cách các khối con được phân bổ khoảng cách dọc theo trục chính (trục main). Chẳng hạn dồn vào giữa (center) hay cách đều 2 mép (space-between).
align-items: Thuộc tính chuyên dùng để điều khiển vị trí của các khối con nhưng là trên trục phụ (trục cross). Ví dụ cho kéo dài chập nóc chạm đáy (stretch) hay chỉ co vào điểm giữa (center).

faq,

❓ Hỏi đáp

Q. Làm thế nào để biết lúc nào xài Flexbox, lúc nào xài Grid?: A. Theo lời khuyên từ các chuyên gia: Nếu bạn chỉ xếp các hàng loạt vào 1 chiều ngang (hoặc 1 dọc) thì xài Flexbox là đủ. Còn nếu bạn đang tính thiết kế cái form to, chia ô chia mảng đủ ngóc ngách thì phải vác Grid ra. Phổ biến nhất là người ta kết hợp: Lấy Grid bọc ngoài chia khối to, dùng Flexbox xếp mấy nút nhỏ bên trong từng khối.
Q. Công cụ có tạo ra được các CSS tương thích điện thoại (Responsive) không?: A. Công cụ không tự động nhúng các query báo hiệu thay đổi kích thước như @media. Thay vào đó, bạn có thể tự tạo ra giao diện thông minh có tính đáp ứng tự động bằng cách tận dụng những "vũ khí" sẵn có. Ví dụ gạt flex-wrap sang wrap, hay dùng hàm repeat(auto-fit, minmax(...)) trong tùy chọn của Grid.
Q. Nó có chạy tốt trên IE11 đồ cổ không?: A. Công cụ chủ yếu hướng tới việc sinh ra các chuẩn CSS hiện đại nhất bây giờ. Do đó một số tính năng, đặc biệt là Grid và khoảng cách khe (gap) chắc chắn sẽ "toang" khi lướt trên IE11.