노마드코더에서 CSS Layout 학습을 하고 있다.
그 중 grid 개념을 즐겁게 학습할 수 있는 Grid Garden 게임을 하면서 정리를 해봤다.
https://cssgridgarden.com/#ko로 들어가면 즐길 수 있다.

1단계

<grid-column-start 속성>
그리드 요소의 시작 열(column) 위치를 지정한다.

• integer : 양수, 음수 다 설정 가능
• span integer : span은 양수만 설정 가능

1단계 정답

grid-column-start: 3;

2단계

2단계 정답

grid-column-start: -2;

3단계

<grid-column-end 속성>
그리드 요소의 마지막 열(column) 위치를 지정한다.

• integer : 양수, 음수 다 설정 가능
• span integer : span은 양수만 설정 가능

3단계 정답

grid-column-end: 4;

4단계

4단계 정답

grid-column-end: -5;

5단계

5단계 정답

grid-column-end: -2;

6단계

6단계 정답

grid-column-start: -3;

7단계

7단계 정답

grid-column-end: span 2;

8단계

8단계 정답

grid-column-end: span 5;

9단계

9단계 정답

grid-column-start: span 3;

10단계

<grid-column 속성>
그리드 요소의 열(column) 위치를 지정한다.
grid-column : grid-column-start 값 / grid-column-end 값
span 키워드도 사용이 가능하다.

10단계 정답

grid-column: -3 / -1;

11단계

11단계 정답

grid-column: 2 / span 3;

12단계

<grid-row-start 속성>
그리드 요소의 시작 행(row) 위치를 지정한다.

• integer : 양수, 음수 다 설정 가능
• span integer : span은 양수만 설정 가능

12단계 정답

grid-row-start: 3;

13단계

<grid-row 속성>
그리드 요소의 행(row) 위치를 지정한다.
grid-row : grid-row-start 값 / grid-row-end 값
span 키워드도 사용이 가능하다.

13단계 정답

grid-row: 3 / -1;

14단계

14단계 정답

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

15단계

15단계 정답

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

16단계

<grid-area 속성>
그리드 요소의 크기와 위치를 지정한다.
grid-area : grid-row-start 값 / grid-column-start 값 / grid-row-end 값 / grid-column 값

16단계 정답

grid-area: 1 / 2 / 4 / -1;

17단계

17단계 정답

grid-area: 2 / 3 / 5 / -1;

18단계

<order 속성>
그리드 요소의 순서를 지정한다.

• integer : 양수, 음수 다 설정 가능

18단계 정답

order: 1;

19단계

19단계 정답

order: -1;

20단계

<grid-template-columns 속성>
그리드의 열(column) 크기와 명칭을 지정한다.

• length(px, em ...)
• percentage(%)
• flex
• max-content
• min-content
• minmax(min, max)
• repeat 함수 : 동일한 너비의 열(column)들을 지정할 때 사용
• fr : 사용가능한 공간을 하나로 공유하여 할당한다.

20단계 정답

grid-template-columns: 50%;

21단계

21단계 정답

grid-template-columns: repeat(8, 12.5%);

22단계

22단계 정답

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

23단계

23단계 정답

grid-template-columns: 1fr 5fr;

24단계

24단계 정답

grid-template-columns: 50px repeat(3, 1fr) 50px;

25단계

25단계 정답

grid-template-columns: 75px 1.5fr 1fr;

26단계

<grid-template-rows 속성>
그리드의 행(row) 크기와 명칭을 지정한다.

• length(px, em ...)
• percentage(%)
• flex
• max-content
• min-content
• minmax(min, max)
• repeat 함수 : 동일한 너비의 행(row)들을 지정할 때 사용
• fr : 사용가능한 공간을 하나로 공유하여 할당한다.

26단계 정답

grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;

27단계

<grid-template 속성>
그리드의 행(row)과 열(column)에 대한 크기와 명칭을 지정한다.
grid-template : grid-template-rows 값 / grid-template-columns 값

27단계 정답

grid-template: 60% / 200px;

28단계

28단계 정답

grid-template: auto 50px / 1fr 4fr;