Trình Tạo Grid CSS — Xây Dựng Layout Hai Chiều

CSS Grid là công cụ layout mạnh nhất trong CSS. Trình tạo của chúng tôi cho phép định nghĩa cột, hàng và khoảng cách trực quan rồi tạo code Grid sẵn dùng.

Các Khái Niệm Grid

grid-template-columns định nghĩa độ rộng cột. grid-template-rows định nghĩa chiều cao hàng. gap (hoặc grid-gap) thiết lập khoảng cách giữa các ô. fr (đơn vị phân số) phân bổ không gian có sẵn theo tỷ lệ.

Grid Responsive Với Auto-fill

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) tạo grid responsive không cần media query. Cột tự động điều chỉnh theo độ rộng có sẵn. Kích thước tối thiểu (250px) ngăn cột quá hẹp trên di động.

Vị Trí Trong Grid

grid-column: 1 / 3 cho phép một phần tử chiếm hai cột. grid-area đặt tên cho phần tử để định vị. grid-template-areas cho phép mô tả layout trực quan bằng văn bản. Mạnh mẽ cho layout trang phức tạp.