[CSS] Grid

Flex보다 좀 더 복합적으로 레이아웃을 표현할 수 있는 레이아웃 시스템으로
Flex가 수평, 수직영역 중 한 방향으로만 레이아웃을 나눈다면
Grid를 수평, 수직영역 동시에 레이아웃 영역을 나눌 수 있습니다.

Grid 용어들

그리드 컨테이너 (Grid Container)
Grid의 전체 영역입니다. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 됩니다. 위 코드 <div class=”container”></div>가 Grid 컨테이너예요.

그리드 아이템 (Grid Item)
Grid 컨테이너의 자식 요소들입니다. 바로 이 아이템들이 Grid 규칙에 의해 배치되는 거예요. 위 코드에서 <div class=”item”></div>들이 Grid 아이템입니다.

그리드 트랙 (Grid Track)
Grid의 행(Row) 또는 열(Column)

그리드 셀 (Grid Cell)
Grid의 한 칸 가리키는 용어 <div>같은 실제 html 요소는 그리드 아이템이고, 이런 Grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 됩니다.

그리드 라인(Grid Line)
Grid 셀을 구분하는 선입니다.

그리드 번호(Grid Number)
Grid 라인의 각 번호입니다.

그리드 갭(Grid Gap)
Grid 셀 사이의 간격입니다.

그리드 영역(Grid Area)
Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합

display: grid

grid 설정하는 속성

• inline-grid는 inline-block과 동일한 효과를 줌

.container {
	display: grid;
    /* display: inline-grid; */
}

grid-template-row / grid template-columns

그리드 형태 및 트랙의 크기들을 지정하는 속성

• grid-template-rows : 행의 배치
• grid-template-columns : 열의 배치

.container {
	grid-template-columns: 200px 200px 500px; // 컬럼 
	/* grid-template-columns: 1fr 1fr 1fr */ fr:비율대로 트랙의 크기를 나눔(1:1:1)
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */

	grid-template-rows: 200px 200px 500px;
	/* grid-template-rows: 1fr 1fr 1fr */
	/* grid-template-rows: repeat(3, 1fr) */
	/* grid-template-rows: 200px 1fr */
}

repeat() 함수

repeat(반복횟수, 반복값)
반복되는 값을 자동으로 처리하는 함수

.container {
	grid-template-columns: repeat(5, 1fr); //1fr을 5번 반복한다.
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */ 위의 코드와 같은 의미
}

minmax 함수

minmax(최소값,최대값)
최소값과 최대값을 지정할 수 있는 함수

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

참조 : https://studiomeal.com/archives/533
https://yamoo9.gitbook.io/css-grid/