Tìm hiểu Bố cục lưới CSS (Cách thú vị) với Grid Garden

Hầu hết các nhà phát triển web đều biết trò chơi Flexbox Froggy dạy cho bạn những điều cơ bản của flexbox từ đầu. Trò chơi miễn phí này đã lan truyền và nó vẫn cực kỳ có giá trị để dạy mọi người cách viết mã bằng flexbox.

Vâng, cùng một nhà phát triển đã tạo ra trò chơi đó có một trò chơi hoàn toàn mới gọi là Vườn lưới.

Trò chơi này hoạt động theo cách tương tự nhưng dạy bạn cách mã hóa lưới CSS. Đây là một tính năng tương đối mới nhưng nó nắm bắt nhanh và Grid Garden dễ dàng là cách tốt nhất để học.

Mọi thứ trong Grid Garden đều theo sau phong cách giảng dạy tương tự như Flexbox Froggy. Nó được tạo ra bởi cùng một nhà phát triển, Thomas Park, vì vậy bạn có thể mong đợi một mức độ khó và khả năng sử dụng tương tự.

Theo mặc định, bạn bắt đầu ở cấp một với một tổng cộng 28 cấp từ đầu đến cuối. Bạn luôn luôn có thể mà bỏ qua các cấp nếu bạn nghĩ rằng bất kỳ điều gì là quá khó, nhưng tôi thấy thật tốt khi làm việc với tất cả chúng chỉ như một sự bồi dưỡng.

Nếu bạn không biết làm thế nào các thuộc tính liên quan đến lưới hoạt động, bạn sẽ thấy mình Googling rất nhiều từ. Bố cục lưới CSS là một mô-đun hoàn toàn mới với cú pháp và tính năng riêng của nó.

Tôi đặc biệt khuyên bạn nên chơi đùa với Grid Garden bất cứ khi nào bạn có cơ hội. Nó thực tế là một Sân chơi của nhà phát triển CSS cho học tập và nghiên cứu tất cả các thuộc tính bố trí lưới khác nhau.

Tôi không thể nói trò chơi này sẽ giúp bạn trở thành một chuyên gia về lưới CSS. Chỉ có các dự án xây dựng và thực hành nhiều có thể đưa bạn đến một cấp độ chuyên gia. Nhưng, Grid Garden là một cách thú vị để bắt đầu mà không có tất cả những căng thẳng thông thường đi vào việc học một cái gì đó mới.

Toàn bộ dự án hoàn toàn miễn phí và có nguồn mở trên GitHub nếu bạn muốn tải xuống tại địa phương để nghiên cứu hoặc mở rộng. Bạn cũng có thể chia sẻ suy nghĩ của mình với người tạo trên Twitter @thomashpark.