[CSS]그리드(Grid)

1. grid

2차원으로 배치하는 방법

grid-template-rows(columns)
gap
grid-auto-rows(columns)
grid-row(column), span
grid-area, grid-template-areas


2. grid 나누기

grid-template-rows: 간격, 간격...(원하는 개수만큼)
로우 나누기

grid-template-columns : 간격, 간격, 간격 ...(원하는 개수만큼)
컬럼나누기

grid-template : row1 row2 ... / col1 col2 ...
한번에 작성하기


3. 유연한 크기와 유용한 함수들
grid-template : 1fr 1fr ... / 1fr 1fr...
fr(fraction)을 사용하면 그리드 박스 크기 기준으로 비율을 가질 수 있다.

minmax(최솟값, 최댓값)
셀 크기의 최솟값과 최댓값을 정해준다(반응형)
최솟값은 fr을 사용할 수 없고 최댓값은 fr을 사용할 수 있다.

repeat(횟수, 크기);
해당 크기를 작성한 횟수 반복하겠다는 함수


4. 크기 미리 정해두기

grid-template-columns 속성으로 컬럼만 나누고
grid-auto-rows : 크기;

grid-auto-rows : 크기1 크기2 크기3;
여러개 쓰면 높이를 번갈아 가면서 적용할 수도 있다.

grid-auto-columns도 사용가능하다.


5. 원하는 위치에 요소 배치하기

그리드 라인으로 위치를 정함
grid-row : 라인번호;
grid-column : 라인번호;
해당 셀을 라인번호 위치로 옮김

grid-row : 라인번호 / 라인번호;
or
grid-row : 라인번호 / span 셀크기;
여러칸에 한번에 배치할때


6. 이름으로 배치하기

grid-area : 이름;
요소에 이름 붙이기

ex) 그리드 컨테이너에
grid-template-areas :
  "이름1 이름1"
  "이름2 이름3"