Giới thiệu về Grid Garden
Grid Garden là gì?
- Grid Garden là một trò chơi để học bố cục CSS Grid.
- Người dùng chơi bằng cách sử dụng thuộc tính grid-column-start để tưới nước vào khu vực có cà rốt.
Giải thích mã ví dụ
- grid-column-start: 3; có nghĩa là tưới nước vào vùng bắt đầu từ đường dọc thứ ba của lưới.
- Mỗi cột và hàng của lưới được thiết lập để chiếm 20%.
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {}
Tài liệu học thêm
- Bạn có thể học CSS Flexbox thông qua Flexbox Froggy.
Ý kiến của GN⁺
- Giá trị giáo dục: Grid Garden là một công cụ tốt giúp học CSS Grid một cách thú vị thông qua trò chơi.
- Tầm quan trọng của thực hành: Những công cụ học tương tác như thế này giúp việc học hiệu quả hơn qua thực hành thay vì chỉ lý thuyết.
- Khả năng mở rộng kỹ năng: CSS Grid và Flexbox là những kỹ thuật quan trọng trong thiết kế web hiện đại, vì vậy việc hiểu rõ chúng là rất cần thiết.
- Đề xuất công cụ khác: Ngoài CSS Grid, cũng nên thử các công cụ học khác như CSS Diner.
- Lưu ý: Sau khi nắm các khái niệm cơ bản qua trò chơi, cũng важно học cách áp dụng chúng trong các dự án thực tế.
1 bình luận
Ý kiến Hacker News