mingg IT

[CSS] Grid Garden 정답 본문

FrontEnd

[CSS] Grid Garden 정답

mingg123 2024. 6. 23. 22:16

https://cssgridgarden.com/

 

Grid Garden

A game for learning CSS grid layout

cssgridgarden.com

 

- 지인의 추천으로 한번 해보게 되었다.

- 1시간 순삭 

- 개인적으로 grid mdn 읽는 것 보다 직접 사용하는게 훨씬 습득하기엔 좋은 것 같다.

- 난이도는 어려운 편은 아니였음. 

- 26번 부터 슬슬 막히기 시작했음.

 

 

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-start: -3

 

7번

grid-column-end: span 2

 

8번

grid-column-end: span 5

 

9번

grid-column-start: 3

 

10번

grid-column: 4/6

 

11번

grid-column: 2/3 span

 

12번

grid-row-start: 3

 

13번

grid-row: 3/6

 

14번

grid-column:2
grid-row: 5

 

15번

grid-column: 2/6
grid-row: 1/6

 

16번

grid-area: 1/2/4/6

 

17번

grid-area: 2/3/5/6

 

18번

order: 1

 

19번

order: -1

 

20번

grid-template-columns: 50%

 

21번

grid-template-column: repeat(8, 12.5%)

 

22번

grid-template-columns: 100px 3em 40%

 

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: 50ox 0 0 0

 

27번

grid-template: 60% 40% 200px

 

28번

grid-template: 1fr 50px 20% 1fr

 

 

- 혹시나 답에 오타가 있을 순 있다. 

- 답이 이해안가는게 있으면 댓글 달아주시면 다시 풀어보고 이유도 작성해 두겠음. 

Comments