CSS Grid là gì?
CSS Grid Layout là hệ thống bố cục hai chiều tích hợp sẵn trong các trình duyệt hiện đại. Bạn định nghĩa vùng chứa grid bằng display: grid, sau đó điều khiển cột bằng grid-template-columns và hàng bằng grid-template-rows. Đơn vị phân số (fr) phân phối không gian có sẵn theo tỷ lệ. Các phần tử con có thể trải rộng qua nhiều cột hoặc hàng bằng cách dùng grid-column: span N và grid-row: span N.
Cách sử dụng Công cụ tạo CSS Grid
-
Đặt số lượng cột và hàng bằng cách dùng ô nhập số (1–12 cho mỗi loại).
-
Điều chỉnh grid-template-columns và grid-template-rows để kiểm soát kích thước (vd. 1fr 2fr, 200px auto).
-
Đặt khoảng cách giữa các ô (vd. 10px, 1rem).
-
Nhấp vào bất kỳ ô nào trong xem trước để chọn (chuyển màu cam).
-
Đặt col-span và row-span trong bảng Độ kéo dài ô, sau đó nhấp Áp dụng. Các ô kéo dài chuyển màu xanh lá.
-
Nhấp tab CSS hoặc HTML để chuyển định dạng đầu ra, sau đó Sao chép vào clipboard.
-
Nhấp Đặt lại tất cả để bắt đầu lại với lưới 3×3 mới.