Tạo bố cục CSS grid và flexbox

Công cụ này làm gì

Hai trình dựng cho hai hệ bố cục của CSS, mỗi cái có bản xem trước do chính trình duyệt của bạn vẽ và ba kết quả: CSS, HTML đi kèm, và cùng bố cục đó dạng lớp Tailwind CSS v4.

• Grid: cột và hàng với fr, px, %, auto, min-content, max-content hoặc minmax(px, fr), các cột giống nhau viết gọn bằng repeat(), khoảng cách hàng và cột riêng, bốn thuộc tính căn chỉnh, chế độ tự xếp nhiều cột nhất có thể, và vùng đặt tên tô bằng cách bấm hoặc kéo qua các ô.
• Flexbox: hướng, xuống dòng, justify-content, align-items, align-content, khoảng cách, và cho từng phần tử flex-grow, flex-shrink, flex-basis, order, align-self.

Lưu ý khi dùng

fr chia phần không gian còn lại sau các cột cố định và khoảng cách: trong khung rộng 800 px, hai cột 200 px và hai khoảng 16 px để lại 368 px cho cột 1fr ở giữa. Mỗi vùng đặt tên phải là một hình chữ nhật đặc; hình chữ L hoặc cùng tên ở hai chỗ làm cả giá trị grid-template-areas vô hiệu. Công cụ chỉ ra tên gây lỗi và bỏ vùng khỏi kết quả cho tới khi sửa xong. flex: 1 nghĩa là grow 1, shrink 1, basis 0%: các phần tử chia đều không gian bất kể nội dung. order chỉ đổi thứ tự hiển thị, không đổi thứ tự phím Tab và trình đọc màn hình.

Đọc thêm CSS grid hay flexbox: ví dụ bố cục cụ thể, và thêm chiều sâu bằng công cụ tạo box shadow.