Tạo CSS Grid
Công cụ tạo layout CSS Grid miễn phí trực tuyến, trình soạn trực quan
CSS Grid Layout cơ bản
CSS Grid là hệ thống bố cục hai chiều để sắp xếp phần tử theo hàng và cột. Thuộc tính chính: grid-template-columns xác định track cột, grid-template-rows xác định track hàng, gap kiểm soát khoảng cách và grid-area định vị mục. Grid vượt trội ở bố cục cấp trang.
Cách sử dụng Grid Generator
Đặt số cột và hàng. Bản xem trước hiển thị bố cục grid. Điều chỉnh kích thước và khoảng cách. Sao chép mã CSS đã tạo cho dự án của bạn.
▶Khi nào nên dùng Grid thay vì Flexbox?
Sử dụng Grid cho bố cục hai chiều (hàng VÀ cột đồng thời). Sử dụng Flexbox cho bố cục một chiều (hoặc một hàng HOẶC một cột). Grid tốt hơn cho bố cục trang; Flexbox tốt hơn cho bố cục thành phần.
▶Đơn vị fr trong CSS Grid là gì?
fr (fraction) là đơn vị linh hoạt phân phối không gian còn lại. grid-template-columns: 1fr 2fr cho cột thứ hai gấp đôi không gian cột đầu tiên. Nó tương tự flex-grow trong Flexbox.
▶Mục Grid có thể span nhiều ô không?
Có. Sử dụng grid-column: span 2 hoặc grid-row: span 2 để làm cho mục span nhiều cột hoặc hàng. Bạn cũng có thể sử dụng grid area được đặt tên cho bố cục phức tạp.