Grid Garden에서 할 수 있는 Grid 개념 익히기 게임
- 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 / span 3; - 12단계 :
grid-row-start: 3; - 13단계 :
grid-row: 3 / span 5; - 14단계 :
grid-column: 2; grid-row: 5; - 15단계 :
grid-column: 2 / span 5; grid-row: 1 / span 5; - 16단계 :
grid-area: 1 / 2 / 4 / 6; - 17단계 :
grid-area: 2 / 3 / 5 / 6; - 18단계 :
order: 5; - 19단계 :
order: -1; - 20단계 :
grid-template-columns: 50%; - 21단계 :
grid-template-columns: repeat(8, 12.5%); - 22단계 :
grid-template-columns: 100px 3em 40%; - 23단계 :
grid-template-columns: 1fr 5fr; - 24단계 :
grid-template-columns: 50px repeat(3, 1fr) 50px; - 25단계 :
grid-template-columns: 75px 3fr 2fr; - 26단계 :
grid-template-rows: 50px 0 0 0; - 27단계 :
grid-template: 60% 40% / 200px; - 28단계 :
grid-template: 1fr 50px / 1fr 4fr;
휘발방지
선생님 15번 정답이 grid-column: 2/ span 4; grid-row: 1/ span 5; 가 더 정확하지 않을까요?
span만큼을 채운다는 의미에서 15번은 4x5를 채워야하니까 span 4가 더 정확할 것 같습니다~!
좋은글 잘보고 갑니다 ~ ^^