Grid Garden으로 CSS Grid 익히기

Grid Garden

---

CSS의 레이아웃을 지정하는 속성 중 하나인 Grid에 대해서 공부하게 되었다.

Flex에 비해 2차원으로 속성을 나열할 수 있다는 것이 매력적인 것 같다.

아직 제대로 쓰기엔 헷갈리는 부분이 많아 연습할 수 있는 사이트가 있지 않을까 해서 찾아보았다.

구글에는 없는게 없지

 

 

https://cssgridgarden.com/#ko

Grid Garden

 

귀여운 그래픽의 사이트 발견~ 🤸‍♀️

밭에 심겨진 당근에 물을 주거나 잡초를 없애는 스토리를 가지고 있다. 총 28단계!

예전에 Flex도 저 곳에서 연습했었는데 같은 시리즈 같다. (Flex는 연꽃 위의 개구리)

Flex는 영어로 진행했었는데 친절하게도 한국어 버전도 제공한다!

 

 

그럼 이제 한번 풀어보자 . . .

 

---

다 풀고 나서 좀 헤맸던 부분만 캡쳐해봤다.

우선 알고가야할 점!

grid는 선(line)으로 영역을 인식한다.

크롬 개발자 도구에서 확인할 수 있다

🔸 level 24

24단계

왼쪽 당근 50px, 오른쪽 잡초 50px로 이루어져 있고, grid-template-columns를 사용해 2개의 열, fr을 사용하여 나머지 공간을 차지하는 총 3개의 열을 만들어야 한다.

 

🔸 오답

처음의 오답,,

처음엔 별 생각 없이 3개의 열을 만들어야 한다 해서 아래와 같이 입력했다.

오답이다... 당연함. 😅

grid-template-columns: 50px 1fr 50px;

처음부터 다시 보면, css 코드에 water와 poison이 각각 고정된 영역이 있음을 알 수 있다.

#water{
    grid-area: 1 / 1 / 6 / 2;
}

#poison{
    grid-area: 1 / 5 / 6 / 6;
}

 

 

grid-area는 grid의 여러 속성을 한번에 쓸 수 있는 단축속성인데, 아래와 같이 적용할 수 있다.

grid-area: row-start / column-start / row-end / column-end;

위의 코드에 이를 다시 대입해보면 water와 poison 모두 열이 1부터 6까지의 선으로 고정되어있다는 것을 알 수 있다.

고로 나의 오답은 세번째 칸까지만 너비영역을 지정했으니 나머지는 뒤로 밀려있다는 것이다.

가운데 세 칸을 같은 너비로 지정해주면 정답이 완성된다.

 

 

 

🔸 level 26

상단의 50px을 제외하고 물을 줘야하는데, 아래 water 코드를 잘 보면 물이 5번째 행에만 적용되어 있다.

즉 4번째 행까지의 너비를 50px로 만들어야 하는 것이다.

 

 

 

🔸 level 28

마지막 문제. 정원 바닥 50px를 남기고 독과 물을 적절하게 적용시켜야 한다.

왼쪽 잡초는 20%가 존재하며 grid 속성을 이용해서 써야한다. 여기는 별다른 전제조건이 없다.

우선 행에 대한 부분은 정원 바닥을 남겨둔 나머지. 50px 위에 가상의 선이 있다고 생각하고 작성!

열에 대한 부분도 동일하다. 좌측의 20%를 남겨둔 나머지 영역에 대한 부분을 지정하면 끝~

grid: 5fr 50px / 20% 5fr;

 

 

 

 

grid에 대한 자세한 부분은 MDN을 참고했다.

직접 연습하다 보니 한결 이해가 되지만 아무래도 아직 좀 더 연습이 필요할듯 하다 ㅎㅎ..

 

https://developer.mozilla.org/ko/docs/Web/CSS/grid

grid - CSS: Cascading Style Sheets | MDN

 

 

 

 

 

---

🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️

방문해주셔서 감사합니다! 🙌

포스팅들은 공부중인 내용을 글로 작성한 것이라 부족한 점이 많으니 참고 부탁드립니다. 

부족한 부분에 대한 코멘트는 언제나 환영입니다.

좋은 하루 되세요, 감사합니다! 🙂