CSS Grid

Flex는 한 방향 레이아웃 시스템(1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)

Grid의 구조는 flex와 마찬가지로 컨테이너와 아이템으로 구성됨

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

부모요소가 컨테이너 자식요소가 아이템

.container {
	display: grid;
}

그리드 설정 방법!

그리드 트랙 : grid의 행 또는 열
그리드 셀 : grid의 한칸
그리드 라인 : grid 셀을 구분하는 선
그리드 번호 : grid 라인의 각 번호
그리드 갭 : grid 셀 사이으이 간격
그리드 영역 : grid 라인으로 둘러싸인 사각형 영역

그리도 속성도 플레스랑 마찬가지로
컨테이너 적용하는 속성
아이템에 적용하는 속성
두가지로 나뉜다.

그리드 형태 정의
grid-template-rows
grid-template-columns

.container {
	grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */

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

row는 행의 배치
column은 열의 배치

repeat 함수

grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */

반복되는 횟수, 반복값을 자동으로 처리할 수 있는 함수이다.

minmax 함수
최솟값과 최댓값을 지정할 수 있는 함수
minmax(100px,auto) / 최소한 100px, 최대는 auto 늘어나게

간격 만들기
row-gap
column-gap
gap

.container {
	row-gap: 10px;
	/* row의 간격을 10px로 */
	column-gap: 20px;
	/* column의 간격을 20px로 */
}

.container {
	gap: 10px 20px;
	/* row-gap: 10px; column-gap: 20px; */
}

.container {
	gap: 20px;
	/* row-gap: 20px; column-gap: 20px; */
}

그리드의 셀간격을 설정한다.

그리드 형태를 자동으로 정의
grid-auto-columns
grid-auto-rows

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

.container {
	grid-auto-rows: minmax(100px, auto);
}

통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성

각 셀의 영역 지정
grid-column-start
grid-column-end
grid-column
grid-row-start
grid-row-end
grid-row
-ms-grid-row
-ms-grid-column
-ms-grid-row-span
-ms-grid-column-span

.item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}