CSS Grid Generator - Trình tạo CSS Grid kéo và thả

• Công cụ giúp tạo bố cục CSS Grid tùy chỉnh dễ dàng hơn
  • Có thể thiết lập số cột, số hàng và kích thước khoảng cách một cách thuận tiện bằng thao tác chuột
• Cách sử dụng
  • Thiết lập cột, hàng và khoảng cách theo nhu cầu
  • Nhấp vào ô vuông có dấu + để thêm phần tử mới vào grid
  • Dùng tay cầm ở góc dưới bên phải để điều chỉnh kích thước DIV
  • Kéo và thả đến vị trí mong muốn để sắp xếp lại DIV
  • Cuối cùng sao chép mã HTML và CSS đã được tạo rồi dán vào dự án
• Tác giả đã tạo Tailwind Grid Generator và nhận được phản hồi tích cực, từ đó phát triển thêm công cụ dành cho plain CSS

[GN⁺]

Ý kiến trên Hacker News

• Sau khi thêm vài ô rồi kéo chúng chồng lên nhau, sẽ xảy ra lỗi vượt ra ngoài ranh giới lưới
• Đã tạo một Tailwind Grid Generator và nhận được phản hồi tích cực, từ đó phát triển công cụ dành cho plain CSS
• Việc sắp xếp lại động còn khó hơn cả cấu hình lưới
  • Đã tham khảo MDN để tìm cách để lưới giảm hoặc tăng số cột
  • Một tiện ích đơn giản rất hữu ích trong việc đơn giản hóa các công việc lặp đi lặp lại
  • Có vẻ sẽ hữu ích nếu lưu trạng thái cấu hình lưới vào URL
• Trình tạo này hữu ích như một công cụ học tập, và khi hiểu cú pháp cùng tính năng thì có thể sử dụng linh hoạt hơn
  • Chrome DevTools cũng hữu ích để chỉnh sửa lưới và xem thay đổi ngay lập tức
  • Đã viết một bài đăng về lưới
• Là một lập trình viên kỳ cựu, tôi quen với việc tạo lưới bằng bảng, nhưng bố cục CSS thì khó
  • Những công cụ như thế này rất hữu ích
• Vài năm trước đã tìm thấy một trình tạo trang tương tự, nhưng không có tính năng kéo thả
  • Đã học được các khái niệm cơ bản của CSS Grid như grid-template-columns, gap, v.v.
  • Mong bạn tiếp tục làm tốt
• Khi Grid lần đầu xuất hiện, tôi nghĩ nó sẽ thay đổi căn bản bố cục web dựa trên template areas
  • Đã không thể xây dựng framework nội bộ và dùng flex
  • Tailwind xuất hiện và đáp ứng mọi thứ cần thiết để viết frontend responsive nhanh chóng
  • Tò mò không biết có ai biết framework hoặc ví dụ hay nào dùng template areas không
  • Lần tới khi làm việc với grid, tôi sẽ dùng công cụ này
• Đã phát hiện hai lỗi
  • Khi thay đổi kích thước cửa sổ trình duyệt, chiều rộng không phản hồi
  • Vì các ô thấp hơn container nên hàng mới xuất hiện cao hơn trong lưới
• Không phải là nhà phát triển web, nhưng có vẻ sẽ có trường hợp cần hơn 12 cột
  • Khi nhập số lớn hơn, số cột được phân tích theo cách kỳ lạ
• UX rất tốt
  • Tôi không thường xuyên tạo bố cục trang nên chưa học sâu cú pháp grid, nhưng sẽ đánh dấu trang công cụ này