Tìm hiểu cách các thuộc tính lưới CSS hoạt động với Griddy.io

Nếu bạn theo kịp với công nghệ thiết kế web thì bạn nên biết về lưới CSS. Những tính chất này là bổ sung mới cho định dạng CSS3 và họ nhanh chóng trở thành người bạn tốt nhất của nhà phát triển.

Gần đây chúng tôi đã đưa ra một trò chơi thú vị để giúp bạn tìm hiểu các thuộc tính lưới CSS, nhưng các trò chơi không phải lúc nào cũng dạy các ý tưởng thực tế. Đó là nơi Griddy có thể hữu ích hơn.

Ứng dụng web miễn phí này cho phép bạn tùy chỉnh lưới trong thời gian thực và cập nhật đoạn trích trực tiếp trên trang. Bạn có thể gây rối với lưới tùy chỉnh của riêng mình bằng cách xác định các cột, máng xối và lề và cấu trúc lại trang để tìm hiểu cách các thuộc tính lưới hoạt động.

Griddy thực sự là một công cụ học tập miễn phí dành cho các nhà phát triển frontend Ai muốn hiểu thêm về lưới CSS.

Với ứng dụng web này, bạn có thể thêm các mục mới vào lưới, xóa các mục khác và thay đổi kích thước chúng để phù hợp với bất kỳ bố cục nào bạn muốn.

Các ứng dụng web có các phần khác nhau với các trường đầu vào khác nhau để chỉnh sửa các thuộc tính lưới. Chúng cho phép bạn định dạng lại các hàng / cột lưới và chúng dạy bạn chính xác những gì bạn đang làm dọc đường.

Bạn có thể xác định các khoảng trống cột, căn chỉnh các mục lưới và chơi với các cài đặt biện minh - tất cả thông qua các trường mẫu này. Bất cứ khi nào bạn thực hiện thay đổi, nó sẽ tự động cập nhật bản xem trước và đoạn mã nhỏ bên dưới.

Bằng cách này, bạn chỉ có thể sao chép và dán CSS vào biểu định kiểu của riêng mình nếu bạn muốn gây rối với nó hơn nữa. Tuyệt đấy!

Griddy có thể không vui như Grid Garden nhưng Griddy là một cách thực tế để học và hiểu trực quan Làm thế nào các thuộc tính lưới CSS ảnh hưởng đến các yếu tố trang.

Để chơi xung quanh nó, chỉ cần truy cập trang chủ Griddy. Bạn cũng có thể chia sẻ suy nghĩ hoặc câu hỏi của mình với người tạo trên Twitter @drewisthe.