Trình tạo CSS Grid
Trình tạo CSS Grid trực quan miễn phí với xem trước trực tiếp. Thiết kế bố cục lưới responsive tương tác và xuất mã CSS sẵn sàng sản xuất ngay.
CSS Grid là gì?
CSS Grid là hệ thống bố cục hai chiều trong CSS cho phép bạn tạo các bố cục web phức tạp bằng hàng và cột. Nó mạnh hơn Flexbox cho bố cục toàn trang vì hoạt động trên cả hai chiều đồng thời.
Trình tạo CSS Grid này hoạt động như thế nào?
Đặt số cột và hàng, xác định kích thước bằng các đơn vị như px, fr hoặc phần trăm, điều chỉnh khoảng cách giữa các mục và xem bố cục cập nhật theo thời gian thực. Sau đó sao chép mã CSS được tạo trực tiếp vào dự án của bạn.
Sự khác biệt giữa các đơn vị px, fr và % là gì?
px đặt kích thước cố định, fr (phân số) phân phối không gian có sẵn theo tỷ lệ, và % đặt kích thước tương đối so với vùng chứa. Sử dụng fr được khuyến nghị cho thiết kế responsive vì nó tự động thích ứng với không gian có sẵn.
Thuộc tính gap làm gì?
Thuộc tính gap xác định khoảng cách giữa các mục lưới. Bạn có thể đặt row-gap và column-gap độc lập. Nó đã thay thế thuộc tính grid-gap cũ và hiện là cách tiêu chuẩn để thêm khoảng cách trong CSS Grid.
Tôi có thể tạo bố cục responsive với công cụ này không?
Có. Sử dụng đơn vị fr cho cột linh hoạt và kết hợp với media query CSS trong dự án của bạn. Mã được tạo hoạt động hoàn hảo với các kỹ thuật thiết kế responsive.
CSS Grid có tốt hơn Flexbox không?
Chúng phục vụ các mục đích khác nhau. CSS Grid lý tưởng cho bố cục hai chiều (hàng và cột cùng nhau), trong khi Flexbox xuất sắc trong bố cục một chiều (hàng hoặc cột). Nhiều bố cục hiện đại kết hợp cả hai.
Trình duyệt nào hỗ trợ CSS Grid?
CSS Grid được hỗ trợ bởi tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge. Theo Can I Use, hỗ trợ trình duyệt toàn cầu vượt 97%.
Tôi có thể lồng lưới bên trong lưới khác không?
Có, CSS Grid hỗ trợ lồng. Bạn có thể đặt vùng chứa lưới bên trong một mục lưới để tạo bố cục phức tạp hơn.
grid-template-areas là gì?
grid-template-areas cho phép bạn đặt tên các vùng lưới và gán mục theo tên. Nó làm cho bố cục phức tạp trở nên dễ đọc hơn.
Làm thế nào để căn giữa các mục trong CSS Grid?
Sử dụng justify-items và align-items để căn giữa trong ô, hoặc justify-content và align-content để căn giữa toàn bộ lưới.
Mã CSS được tạo có sẵn sàng cho sản xuất không?
Có. CSS được tạo tuân theo các tiêu chuẩn hiện đại và thực tiễn tốt nhất. Bạn có thể sao chép trực tiếp vào dự án mà không cần sửa đổi.
Tôi có thể sử dụng auto-fit và auto-fill với trình tạo này không?
Phiên bản hiện tại tập trung vào định nghĩa cột và hàng cố định. Đối với auto-fit và auto-fill với minmax(), bạn có thể thêm thủ công các giá trị này vào CSS được tạo cho lưới responsive thực sự linh hoạt.
Cách sử dụng Trình tạo CSS Grid
Thiết kế bố cục CSS Grid tương tác và xuất mã dùng được ngay. Phần xem trước được tính toán cục bộ trong trình duyệt và không tải lên dữ liệu nào.
- Đặt column-gap và row-gap để kiểm soát khoảng hở giữa các track.
- Chọn giá trị justify-items và align-items như stretch, start, end hoặc center để định vị mục trong ô của nó.
- Phân bổ toàn bộ lưới bằng justify-content và align-content, ví dụ space-between, space-around hoặc space-evenly.
- Xem phần xem trước phản hồi theo từng giá trị bạn chỉnh, rồi sao chép CSS đã tạo.
align-content chỉ có hiệu ứng thấy được khi lưới nhỏ hơn khung chứa; hãy đặt chiều cao cố định cho khung chứa để thấy sự phân bổ.
Công cụ liên quan
- Trình tạo CSS Flexbox Trình tạo CSS Flexbox trực quan với xem trước trực tiếp. Điều chỉnh thuộc tính flex và nhận mã CSS sẵn sàng sử dụng.
- Trình tạo Gradient CSS Tạo gradient CSS tuyệt đẹp trực quan. Tạo gradient tuyến tính, hướng tâm và hình nón với nhiều điểm dừng màu, góc và vị trí tùy chỉnh. Sao chép mã CSS sẵn sàng sản xuất ngay lập tức.
- Trình tạo Box Shadow CSS Trình tạo box-shadow CSS trực tuyến miễn phí. Tạo bóng đẹp trực quan với offset, blur, spread, màu và inset có thể điều chỉnh. Xem trước trực tiếp và sao chép mã ngay lập tức.
- Trình tạo Border Radius CSS Trình tạo border-radius CSS trực quan. Điều chỉnh từng góc độc lập với xem trước thời gian thực và sao chép mã CSS ngay lập tức.
- Trình Tạo Bo Góc CSS Trình tạo bo tròn sáng tạo miễn phí trực tuyến. Kéo 8 điểm điều khiển hoặc chọn hình blob có sẵn để tạo hình khối CSS hữu cơ và sao chép mã ngay lập tức.
- Trình chuyển đổi màu Trình chuyển đổi màu trực tuyến miễn phí. Chuyển đổi định dạng HEX, RGB, HSL, HSV ngay lập tức với bộ chọn trực quan. 100% riêng tư, chạy trong trình duyệt của bạn.
- Trình tạo easing CSS Trình tạo easing CSS trực tuyến miễn phí. Kéo các điểm điều khiển cubic-bezier trên đường cong tương tác, chọn trong 18 mẫu có sẵn, xem bóng lặp lại liên tục và sao chép hàm thời gian ngay.
- Trình tạo text-shadow CSS Trình tạo text-shadow CSS trực tuyến miễn phí. Xếp nhiều lớp bóng với lệch ngang, làm mờ, màu và độ mờ, thử mẫu Neon, 3D, Retro và sao chép mã CSS ngay.