[CSS] Grid Garden - grid 속성을 배워보자

display: grid;

grid-template-columns

• 세로로 그리드 설정

grid-template-rows

• 가로로 그리드 설정

grid-column-start/end

• grid-column-start/end : n
  • 그리드 몇 세로선부터 시작할 것인지/끝낼 것인지 (음수로 두면 뒤에서 부터)
  • end를 더 낮은 값으로 두어 설정할 수도 있다.
  • ex)

grid-column-start: 5;
grid-column-end: 2;

• grid-column-start/end: span n
  • span을 이용하여 n만큼 열의 넓이 지정하기
• grid-column : grid-column-start / grid-column-end
  • grid-column-start와 grid-column-end를 줄인 속성
  • ex)

grid-column: 2 / 4;
grid-column: 2 / span 3;

grid-row-start/end

• column -> row. 수직선으로 한 것

grid-area

• grid-column과 grid-row를 합친 것.
• grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end

order

• default Value : 0
• z-index와 같이 양수와 음수 값 설정 가능
• 소스코드에 기입된 순서대로 표기되지만 order 속성으로 재정의할 수 있음

grid-template

• grid-template-rows와 grid-template-columns를 조합한 단축 속성
• grid-template: grid-template-rows / grid-template-columns

 

 

Answer

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: -4;
10. grid-column: -3 / -1;
11. grid-column: 2 / span 3;
12. grid-row-start: 3;
13. grid-row : 3 / 6;
14. grid-column: 2;
    grid-row:- 2;
15. grid-column: 2 / -1;
    grid-row: 1 / -1;
16. grid-area: 1 / 2 / -3 / -1;
17. grid-area: 2 / 3 / -2 / -1;
18. order: 1;
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 repeat(3, 0px) 1fr;
27. grid-template: 60% 1fr / 200px;
28. grid-template: 1fr 50px / 20% 1fr;