grid

부모한테 주는 수치

• 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칸*