🥕🌱 CSS Grid 속성 배우기 게임 : Grid Garden

🥕🌱 Grid Garden 하러가기

https://cssgridgarden.com/#ko

🥕🌱 Solution

/* 1번 */
grid-column-start: 3;

/* 2번 */
grid-column-start: 5;

/* 3번 */
grid-column-end: 4;

/* 4번 */
grid-column-end: 2;

/* 5번 */
grid-column-end: -2;

/* 6번 */
grid-column: -3;

/* 7번 */
grid-column-end: span 2;

/* 8번 */
grid-column-end: span 5;

/* 9번 */
grid-column-start: span 3;

/* 10번 */
grid-column: 4 / 6;

/* 11번 */
grid-column: 2 / span 3;

/* 12번 */
grid-row-start: 3;

/* 13번 */
grid-row: 3 / span 3;

/* 14번 */
grid-column: 2;
grid-row: 5;

/* 15번 */
grid-column: 2 / span 4;
grid-row: 1 / span 5;

/* 16번 */
grid-area: 1 / 2 / span 3 / span 4;

/* 17번 */
grid-area: 2 / 3 / span 3 / span 3;

/* 18번 */
order: 5;

/* 19번 */
order: -1;

/* 20번 */
grid-template-columns: 50% 50%;

/* 21번 */
grid-template-columns: repeat(8, auto); 

/* 22번 */
grid-template-columns: 100px 3em 40% auto;

/* 23번 */
grid-template-columns: 1fr 5fr;

/* 24번 */
grid-template-columns: 50px auto auto auto 50px;

/* 25번 */
grid-template-columns: 75px 3fr 2fr;

/* 26번 */
grid-template-rows: repeat(4, 12.5px) auto;

/* 27번 */
grid-template: 60% 40% / 200px auto;

/* 28번 */
grid-template: auto 50px / 20% auto;

CSS : Grid 를 공부한 뒤 속성 배우기 게임을 해보았다.
총 28단계까지 있었는데 개인적으로 Flex보다 쉬웠다 게임의 난이도가 쉬운건지 내가 Grid에 더 잘맞는건지 모르겠다.. 이론을 정리하면서 공부했을때는 grid가 훨씬 어려웠는데 게임은 grid가 쉽네 ... 그리고 이론으로 공부하는거보다 게임으로 코드짜면서익히니까 훨~~씬 쉽다. 이제 클론코딩하러가야지