free
Trình Tạo CSS Grid — free
Tạo code CSS Grid layout một cách trực quan.
1
2
3
4
5
6
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px;
How to use Trình Tạo CSS Grid
1
Bước 1: Chọn Grid Layout Của Bạn
Chọn số hàng và cột cho bố cục grid của bạn. Bạn có thể chọn từ các template được thiết kế sẵn hoặc tạo bố cục tùy chỉnh từ đầu.
2
Bước 2: Thêm Grid Items
Kéo và thả các grid items lên layout của bạn để tạo ra một thiết kế hấp dẫn về mặt hình ảnh. Bạn có thể điều chỉnh kích thước, màu sắc và vị trí của từng item theo nhu cầu.
3
Bước 4: Tạo CSS Code
Sau khi bạn đã thiết kế grid layout của mình, nhấp vào nút 'Generate CSS' để nhận mã CSS tùy chỉnh mà bạn có thể sao chép và dán vào file HTML của mình.