Grid Layout

부품을 만들 때 고정값이 아닌 어느 컨테이너에 들어가도 유연할 수 있게 배치할 수 있다.
row(행)과 column(열)을 가진다.

Grid

자식 요소들은 그리드 아이템이 되며 row(행)과 column(열)을 가진다.

display: grid;

Grid 영역의 row(행), column(열) 크기 정의

그리드 영역의 행과 열을 설정하고 크기 지정

grid-templete-rows: 50px 50px 50px 50px;
grid-templete-rows: repeat(4, 50px); 

/* 크비 비율로 지정 */
grid-templete-colums: 1fr 2fr 1fr;

/* 라인에 이름을 붙여서 사용 - named gird lines */
grid-template-columns: [full-start] minmax(1rem, 1fr) [content-start] repeat(12, minmax(5.3125rem, 1fr)) [content-end] minmax(1rem, 1fr) [full-end];

Grid 배치

grid-templete-area

그리드 내의 영역을 이름으로 정의
요소를 템플릿 영역에 배치하며 다중 행이나 다중 열이 병합된 형태로 사용 가능
.으로 지정하면 해당 영역 비워짐
무조건 사각형 배치

grid-template-areas: 
  "item1 item1 item1 item2"
  "item1 item1 item1 item6"
  "item4 item5 item5 item6"
  "item7 item5 item5 item3";

.grid-item-1 {
	grid-area: item1;
}

.grid-item-2 {
	grid-area: item2;
}

라인 기반 배치

행이나 열의 시작과 종료 라인을 값으로 지정

.grid-item-1{
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 3;

	/* 단축 속성 - 항목의 시작과 끝을 정의 */
    grid-row: 1 / 3;
    grid-column: 1 / 3;

	/* 단축 속성 - 위치를 한번에 설정 *(/
	grid-area: 1 / 1 / 3 / 3;

    grid-row: 1 / span 2; /* 2칸 차지 */
    grid-column: 1 / span 2;
    grid-column: span 3;

    /* 데스크탑은 12column으로 나누지만 모바일이나 태블릿 환경은 적게 나누기 때문에 -1로 마지막 컬럼을 지정 */
    gird-column: 1 / -1;

    grid-column: span 6; /* 가로로 6개의 칸을 차지 */

    /* named grid lines */
	grid-column: full-start / full-end;
    /* 단축 */
    grid-column: full;
  }

## Grid 정렬

### 아이템 정렬
> 전체 그리드 정렬

/ column(열, 블록 축) 기준 정렬 /
align-content: start;

/ 'row'(행, 인라인 축) 기준 정렬 /
justify-content: center;

/ 단축 /
place-content: start center;

아이템 내부 콘텐츠(셀 안의 항목) 정렬

/* `column`(열, 블록 축) 기준 정렬 */
align-items: start;

/* 'row'(행, 인라인 축) 기준 정렬 */
justify-items: end;

/* 단축 */
place-items: start end;

개별 그리드 아이템 내부 콘텐츠 정렬(교차축 정렬)

/* `column`(열, 블록 축) 기준 정렬 */
align-self: center;

/* 'row'(행, 인라인 축) 기준 정렬 */
justify-self: start;

/* 단축 */
place-self: center start;

grid-auto-flow

기본값 : 마크업 순서를 따라 앞에 비어있는 그리드가 있어도 다음에 배치된다.

/* 마크업 순서를 따르지 않고 비어있는 그리드가 있으면 먼저 채운다 */
grid-auto-flow: dnese

subgrid

그리드 속성을 가진 부모의 자식에게 그리드 속성을 줄 때, 부모 컨테이너가 갖는 템플릿 선언값을 그대로 상속받기 위한 속성
배경은 화면 너비를 꽉 채워야하지만 텍스트 요소는 그 안의 컨텐츠 영역부터 시작해야하는 네비게이션이나 푸터 속성에 많이 쓰인다.

.container{
	display: grid;
    min-height: 100vh;
    /* 총 14개의 컬럼 */
    grid-template-columns: [full-start] minmax(1rem, 1fr) [content-start] repeat(12, minmax(5.3125rem, 1fr)) [content-end] minmax(1rem, 1fr) [full-end];

.navigation{
	/* 14칸의 컬럼 차지 */
	grid-column: full;
	display: grid;
    grid-template-columns: subgrid;
    
    .menu{
    	/* 12칸의 컬럼 */
    	grid-column: content;
        display: grid;
        grid-template-colums: subgrid;
	}
}

}