그리드 가든(Grid Garden)은 당근밭을 가꾸며 CSS 그리드를 배우는 게임이다. 코드를 이용해 물을 보낼 영역과 잡초를 처리할 영역을 지정한다. 열과 행과 영역이라는 배치의 개념이 밭의 위치와 겹쳐 보인다. 단계별 문제를 풀다 보면 숫자를 바꾸는 일이 화면의 어느 범위를 바꾸는지 알 수 있다. 플렉스박스 프로기와 함께 해 보면 CSS로 배치를 다루는 서로 다른 방식을 비교하기 좋다.

• 공식 웹사이트

• 게임 소개

기타 등등

• 설명 언어 목록에 한국어도 있다. CSS 속성 이름은 그대로 두고 문제 설명을 익숙한 언어로 읽을 수 있다. 출처
• 제작자의 안내는 CSS 기초를 알면 좋지만 필수 조건은 아니라고 밝힌다. 배치 문법을 모두 외운 뒤에 입장해야 하는 정원은 아니다. 출처

#웹사이트 #CSS #교육 #게임