flexbox를 이용해 하위 박스들을 움직이고 제어하는부분은 편하지만, Grid형태를 유지시키려면 많은 관심을 줘야한다. 어렵다. 이때 CSS grid를 사용할 수 있다.
→ Grid 형태를 만들기 위해!
flexbox와 같이 grid도 부모 element에서 동작한다. display: grid; 와 같이 css를 설정하면 된다.
grid-template-columns: 10px 10px 10px 와 같은 형식으로 컬럼 생성한다. 그리고 grid-template-rows: 10ps 10px 10px 와 같은 형식으로 로우 생성한다. (해당 값으로 auto를 주면 화면의 공간을 전부 사용한다.
grid-template-columns: repeat(4, 200px) 과 같이 반복하여 사용할수도 있다.
grid-template-areas: "header header hader hader" "content content content nav" "content content content nav" "footer footer footer footer" 와 같이 직관적으로 부모 element에서 지정해 줄수 있다. 하지만 이때 css는 문자열로 사용되고있는 header, content, footer, nav 같은 이들을 읽어들이지 못한다. 어떤 대상을 가리키는지 모르기 때문이다. 이때 사용하는 속성이 grid-area 이다. 그리드의 각 cell이 될 각각의 박스에 grid-area 속성을 사용해 이름을 지정해줄 수 있다. 자식 element의 class 이름은 아무 역할을 하지 않는다. 중요한건 자식 element 의 grid-area속성에 지정된 이름이다. 이때 grid-area의 value는 문자열로 해주면 제대로 동작하지 않는다.
Grid 의 자식 박스에서 gird-column-start 와 gird-column-end 로 시작 인덱스와 끝 인덱스를 설정해 임의로 그리드를 드릴수도 있다. 이때 해당 값의 인덱스는 컬럼을 말하는게 아닌 grid의 세로줄을말한다. 즉 gird-column-start: 1 , gird-column-start: 2 인 경우 한칸이 지정되는 것이다.
먼저 부모element에서 grid-template-columns와 grid-template-rows로 칸을 그린 후, 각각의 자식 element에서 grid-column-start, grid-column-end, grid-row,start, grid-row-end의 인덱스를 설정해 표를 그리면 된다. 매우 간단하다.
start와 end를 일일히 적어주는 작업 또한 번거로울수 있다. 이럴때 grid-column: 1 / 5; 또는 grid-갲: 1 / 5; 와같이 사용해주면 start와 end가 1 5로 설정 된다.
더 쉬운 방법이 있다.
grid-column: 1 / 5 보다 1 ~ 마지막줄 까지 적는 방식이 더 편할 수 있다. (line 수를 직접 세는 것 보다.) 이때 -1 값을 주면 된다. 라인이 좌측부터 1 2 3 4 5 ...씩 증가한다면 반대로 우측부터는 -1 -2 -3 ... 으로 증가한다고 생각하면 된다. 시작과 끝을 알면 된다.
또 다른 방법으로는
grid-column:1 / -1; 과 같이 처음부터 끝까지 cell을 적용해야 한다면 grid-column span 개수; 와 같이 값을 설정해 cell을 전부 채워줄수도 있다.
부모element은 grid element 에서 gird-template-columns 속성의 값으로[first] 100px [second] 100px [thrid] 100px [forth] 100px [fifth] 와 같이 각각의 라인에 이름을 붙인 후, 각 cell을 차지할 자식 element에서 grid-column: first / fifth 와같이 이름을 사용하여 셀을 제어할 수 있다.