부모한테 주는 수치
- display: grid;
- gtc→ grid-template-columns: 1fr 1fr 1fr; = repeat(3, 1fr);
→ 가로로 1/3씩 먹었다는 뜻
- gtr→ grid-template-rows: 100px 100px = repeat(2, 100px)
→ 세로로 100px씩 두개 만들겠다는 뜻
(fr은 분수. fraction이라는 뜻)
- grid-template-area: ; →grid-area로 이름을 지정한 값을 하나씩 다 순서대로 선언하면 요소별 위치를 지정할 수 있다
- grid는 grid-column-gap / grid-row-gap으로 나눠서 쓰기 가능
flex에 gap을 쓸때는 gap: 10px 20px 이런식으로 행과 열 수치를 같이 쓰면 됨
자식한테 주는 수치
- grid-area: ;요소별 이름을 설정하는 값
- grid-column/row: 가로/세로 값을 얼만큼 할지 설정 *ex) grid-column/row: 1/2 → 1번 꼭지점에서 2번 꼭지점까지 즉, 1칸* *ex) grid-column/row: span 7 →
꼭지점이 아닌, span(덩어리)7개 즉, 7칸*