[CSS] grid 마스터

◾ Grid

→ 열과 행을 모두 같은 수준으로 우리가 원하는 만큼 제어하고 커스터마이징할 수 있다.

→ 페이지의 전체 레이아웃을 구죽할 수 있음

→ display: grid;

→ 부모에게 지정해야함

---

1. grid-template

→ gird-template-column: 100px 200px;          // 가로

→ gird-template-row: 200px 100px;                // 세로

→ gird-template-column: [one]100px [two]200px [three];          // 각 이름 부여가 가능하다.

→ gird-template-column: 1fr 1fr 1fr;          // 하드 코딩이 아닌 1fr 로 지정할 수 있다

  grid-template:
    "a a a a" 1fr
    "b b b d" 2fr
    "c c c c" 1fr / 1fr 1fr 1fr 1fr;

---

2. gird-template-areas

→ 텍스트로 grid의 템플릿을 디자인하게 해줌

gird-area

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
grid-template-areas:
    "header header header header"
    "content content content chile"    
    "footer footer footer footer";

---

◾  자식에게 사용

grid-column-start: 2;                      // 시작을 지정할 수 있음

grid-column-end: 3;                       // 끝을 지정할 수 있음     // -1 마지막 라인까지

grid-column: 2 / -1                          // 시작과 끝을 같이 지정할 수 있다.

grid-column: one / three                // 부여한 이름을 사용하기

gird-column or row: span2~          // 지정한 수의 행 또는 열을 사용하라고 설정할 수 있다.