Trình tạo CSS Grid
CSS Grid là gì?
CSS Grid Layout là hệ thống bố cục mạnh mẽ nhất trong CSS. Đây là hệ thống hai chiều, có thể xử lý cả cột và hàng, khác với flexbox chủ yếu là một chiều.
Cách sử dụng Trình tạo CSS Grid này
Đặt kích thước lưới
Sử dụng thanh bên để định nghĩa cột, hàng và khoảng cách.
Định nghĩa vùng lưới
Nhấp và kéo trên bản xem trước để chọn các vùng hình chữ nhật.
Tùy chỉnh đơn vị
Điều chỉnh kích thước cột và hàng qua các trường nhập.
Thử mẫu
Chọn từ các bố cục có sẵn như Holy Grail, Blog hoặc Dashboard.
Tạo mã
Nhấp "Tạo mã" để xuất CSS và HTML sẵn sàng sử dụng.
Hướng dẫn Cú pháp CSS Grid
Cốt lõi của CSS Grid bao gồm các thuộc tính như grid-template-columns (để xác định chiều rộng cột), grid-template-rows (để xác định chiều cao hàng) và grid-gap (để thiết lập khoảng cách). Việc sử dụng các đơn vị phân số (fr) cho phép tạo ra các bố cục linh hoạt thích ứng với kích thước khung nhìn.
Ví dụ về Bố cục CSS Grid
Các ví dụ phổ biến bao gồm bố cục 'Holy Grail' (đầu trang, thanh bên, nội dung chính, chân trang) và bố cục 'Main/Sidebar'. Với grid-template-areas, bạn có thể xác định các vùng này bằng những cái tên trực quan, giúp mã của bạn sạch hơn và dễ bảo trì hơn nhiều.