Grid 레이아웃

1. Grid vs Flex

• Grid는 두 방향을 배치할 수 있는 2차원 (행과 열)의 레이아웃을 제공한다.
• Flex는 한 방향으로 배치하는 1차원 레이아웃에서 이용된다.

➡️ Grid는 CSS flex와 같이 Container와 Item이 있다.
Container는 Item을 감싸는 부모 요소이며, 그 안에서 각 Item을
배치할 수 있다.

2. Grid 컨테이너 속성들

속성	의미
display	그리드 컨테이너를 정의
grid-template-rows	행의 크기를 지정함
grid-template-columns	열의 크기를 지정함
grid-template-areas	영역 이름을 참조해 템플릿 생성
grid-template	grid-template-rows/colunms을 지정
row-gap(grid-row-gap)	행과 행 사이의 간격을 정의
column-gap(grid-column-gap)	열과 열 사이의 간격을 정의
gap(grid-gap)	각 행과 행, 열과 열 사이의 간격을 지정
grid-auto-rows	암시적인 행(Track)의 크기를 정의
grid-auto-columns	암시적인 열(Track)의 크기를 정의
grid-auto-flow	자동 배치 알고리즘 방식을 정의
grid	grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content	그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content	그리드 콘텐츠를 수평(행 축) 정렬
place-content	align-content와 justify-content의 단축 속성
align-items	그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items	그리드 아이템들을 수평(행 축) 정렬
place-items	align-items와 justify-items의 단축 속성

3. Grid 아이템들 속성

속성	의미
grid-row-start	그리드 아이템의 행 시작 위치 지정
grid-row-end	그리드 아이템의 행 끝 위치 지정
grid-row	grid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-column-start	그리드 아이템의 열 시작 위치 지정
grid-column-end	그리드 아이템의 열 끝 위치 지정
grid-column	grid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-area	grid-row와 grid-column의 단축 속성으로 영역 이름설정 가능
align-self	단일 그리드 아이템을 수직 정렬
justify-self	단일 그리드 아이템을 수평정렬
place-self	align-self와 justify-self의 단축 속성
order	그리드 아이템의 배치 순서를 지정
z-index	그리드 아이템의 쌓이는 순서를 지정

4. Grid Containers

1. grid-template-row, grid-template-columns

• 명시적인 행/열 크기를 정의한다.
• repeat(행/열 개수, 행/열 크기)를 지정할 수 있다.
• fr은 공간 비율로 단위를 사용한다.

.container{
  display:grid;
  grid-template-row:repeat(3,1fr);
  grid-template-columns:repeat(3,1fr);
  gap:3px;
}

각각 3행 3열 1fr 크기로 그리드 형태로 나열한 컨테이너 모습이다.

2. grid-template

• grid-template-rows, grid-template-columns,
  grid-template-areas의 단축 속성

참고 사이트)
https://heropy.blog/2019/08/17/css-grid/