Học CSS Grid qua trò chơi khu vườn ảo
(cssgridgarden.com)- Grid Garden là công cụ học tập dạng trò chơi nơi bạn viết mã CSS để tưới nước cho vườn cà rốt, giúp luyện tập bố cục CSS Grid theo từng bước
- Ở bước đầu tiên, bạn chỉ định cột bắt đầu bằng thuộc tính grid-column-start để nước chỉ chạm tới khu vực có cà rốt
grid-column-start: 3;làm cho vùng tưới nước bắt đầu từ đường lưới dọc thứ ba tính từ bên trái- Khu vườn ví dụ được tạo thành từ lưới 5x5 với
display: grid,grid-template-columnsvàgrid-template-rows, trong đó mỗi hàng và mỗi cột đều chia thành 20% - Toàn bộ gồm 28 cấp độ, và nếu muốn học thêm CSS, bạn có thể tiếp tục với Flexbox Froggy và Anchoreum
Cách học CSS Grid như luật chơi của một trò chơi
- Grid Garden là trò chơi trồng vườn cà rốt bằng cách nhập mã CSS
- Người chơi điều chỉnh các thuộc tính CSS Grid để chỉ tưới nước vào đúng khu vực có cà rốt
- Ở cấp độ đầu tiên,
grid-column-startđược dùng để chỉ định vị trí cột nơi nước bắt đầu
Cấp độ đầu tiên: grid-column-start và khu vườn 5x5
grid-column-start: 3;bắt đầu vùng tưới nước từ đường biên dọc thứ ba tính từ bên trái của lưới#gardentrong mã ví dụ được thiết lập làm vùng chứa CSS Griddisplay: grid;grid-template-columns: 20% 20% 20% 20% 20%;grid-template-rows: 20% 20% 20% 20% 20%;
- Thiết lập này tạo ra lưới 5x5 với mỗi cột và mỗi hàng đều chiếm 20%
Cấu trúc cấp độ và các trò chơi có thể thử tiếp
- Màn hình hiển thị cấp độ 1 trong tổng số 28 cấp độ
- Các trò chơi để học thêm CSS cũng được gợi ý gồm Flexbox Froggy và Anchoreum
1 bình luận
Các ý kiến trên Hacker News
Tôi luôn thấy loạt bài này của Rachel Andrews là tài liệu học rất tuyệt: https://www.smashingmagazine.com/2020/01/understanding-css-g...
Ngay cả với người làm backend, nó cũng cho một nền tảng vững chắc để tạo các ứng dụng UI hiện đại nhẹ và đơn giản
Không cần Bootstrap hay Tailwind
Không biết CSS thì không thể dùng Tailwind, và trong quá trình dùng bạn sẽ học CSS
Vì vậy tôi lại thấy nó khá nhẹ và đơn giản
Trong khi đó Tailwind không làm thay phần này cho bạn
Nếu không biết Grid hay Flexbox, Tailwind cũng có thể vất vả chẳng kém CSS thuần
Trò chơi này khá hay và vui, nhưng rất dễ bị cám dỗ thử các giá trị lung tung để chỉ giải bài hiện tại, thay vì tập trung vào “thực ra nó hoạt động như thế nào”
Để dẫn tới hiểu biết sâu hơn, có thể cho người chơi nhiều tự do hơn khi giải bài, nhưng áp dụng một hình phạt nhỏ nếu thử quá 2–3 lần
Có những lúc phải gõ đi gõ lại các bài tương tự, vận dụng thứ đã học, rồi chỉnh cho đến khi chạy được
Một vài ghi chú linh tinh:
Vì vậy, miễn là đáp án hợp lệ thì kể cả các cách không dùng grid cũng có thể qua màn
position: relative; left: 31.4em;Ở chỗ làm cũ, tôi từng có buổi show-and-tell khoảng 30 phút mỗi tuần với đội, và có tuần tôi mang trò này ra để những người không code thử đưa ra đáp án
Rất thú vị khi xem họ đi được đến đâu; có người hiểu ngay, có người thì khá chật vật
Nhìn chung mọi người đều thích, và tôi nghĩ đó là cách hay để giúp những người có lẽ cả đời không bao giờ phải code có được cảm giác cơ bản về lập trình
Vài năm sau đồng nghiệp vẫn thỉnh thoảng nhắc kiểu “đây là thứ cậu làm cả ngày à?”, buồn cười là dù đó là phần dễ nhất trong công việc của tôi, họ vẫn nhìn như thể tôi là ảo thuật gia
Dù sao, tôi vui vì nhờ tự thử một chút mà họ có vẻ tôn trọng công việc hơn
Tôi từng nghĩ Flexbox đã thay đổi cục diện của CSS, rồi sau đó Grid xuất hiện và nó thật sự tuyệt vời, dễ dự đoán
Giờ nỗi đau còn lại trong CSS là những trường hợp kỳ quặc kiểu “một component phải chiếm phần không gian còn lại mà các phần tử anh em không dùng, và một phần tử con của nó cũng phải chiếm hết phần mà anh em của nó không dùng, rồi nếu thiếu chỗ thì phải trở thành scroll overflow”
Có khá nhiều trường hợp liên quan đến tương tác kỳ lạ giữa Flexbox và Grid, cùng với thứ tự ưu tiên của layout tính kích thước, mà tôi vẫn chưa hiểu hết
Phần lớn có thể là vấn đề của tôi, nhưng khác với chính Flexbox hay Grid, nó vẫn cho cảm giác không trực quan
Thoáng tưởng đang nói về https://csszengarden.com/pages/about/
Ngày xưa đó là tài nguyên tuyệt vời để học CSS và lấy cảm hứng thiết kế
Đó là lúc thành quả của phong trào tiêu chuẩn web bắt đầu xuất hiện
Tiếc là sau đó React đến, và những thứ tốt đẹp bị ném ra ngoài cửa sổ
Có vẻ tag soup cũng trở nên ăn được nếu bị chôn đủ sâu trong
node_modulesMột vài cuộc thảo luận lớn trước đây:
2019: https://news.ycombinator.com/item?id=21050501
2018: https://news.ycombinator.com/item?id=18753358
2017: https://news.ycombinator.com/item?id=14041367
Trò chơi này và Flexbox Froggy là cách hay để nhập môn layout CSS một cách thú vị
Muốn truy cập trực tiếp thì vào https://flexboxfroggy.com/
Tôi đã hy vọng nó sẽ giúp tìm được giải pháp tốt cho một vấn đề frontend web nhỏ và đơn giản mà tôi đang làm
Nhưng sau khi chơi 10 màn đầu, tôi càng ghét CSS hơn
Lý do tôi ghét CSS Grid là vì nó gần như tước đi cấu trúc ngữ nghĩa của HTML
Với Flexbox, ít nhất cây HTML còn tương ứng với một cấu trúc nào đó của trang, nhưng dùng CSS Grid thì trông sẽ thành kiểu
<-! random amount of divs without classnames -->Khi đó, để hiểu chuyện gì đang diễn ra trên trang, bạn đột nhiên phải đối chiếu với CSS
Nó rất hiệu quả, nhưng xấu xí