CSS 레이아웃(3)

Grid

1. grid 나누기

.container {
	display: grid;
	grid-template-columns: 100px 300px 100px; /* 첫번째 열 100px, 두번째 열 300px, 세번째 열 100px */
	grid-template-rows: 200px 200px 100px; /* 첫번째 행 200xpx, 두번째 행 200px, 세번째 행 100px */
    
	/* 한번에 작성하기 */
	grid-template:
		200px 200px 100px / /* rows부터 작성 */
		100px 300px 100px; /* columns 작성 */
}

2. 유연한 크기와 유용한 함수들

.container {
	width: 100%; /* 화면을 꽉 채우면 빈 공간이 남는다 */
	display: grid;
	grid-template:
		200px 200px 100px /
		1fr 1fr 1fr; /* 1:1:1 비율로 채운다(fraction) */

/* 최대최소 크기 */
	grid-template:
		200px 200px 100px /
		minmax(200px, 300px) minmax(200px, 300px) minmax(200px, 1fr); /* 너비를 최소 200 ~ 300px로 유연하게 만든다 */
/* 최대에만 fr 사용 가능 */

/* 여러개 만들기 */
	grid-template:
		200px 200px 100px /
		repeat(6, minmax(200px, 1fr)); /* minmax(200px, 1fr)을 6번 반복해라 */
}

3. 간격 넣기

.container {
	display: grid;
	grid-template:
		repeat(3, 1fr) /
		repeat(3, 1fr);
	gap: 16px; /* gap: 16px 32px (세로 가로) */
}

4. 크기 미리 정해두기

/* <div>태그 15개 */
.container {
	width: 500px;
	height: 500px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 50px 100px 200px; /* 알아서 rows 크기를 정해준다 */
	gap: 16px 32px;
}

5. 그리드 라인

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

.container {
	width: 500px;
	height: 500px;
	display: grid;
	grid-template:
		repeat(4, 1fr) /
		repeat(5, 1fr);
	gap: 16px;
}

.green {
	grid-row: 3;
	grid-column: 2;
}

.green {
	grid-row: 3 / 5; /* (같은 것)grid-row: 3 / span 2; */
	grid-column: 2 / -2; /* (같은 것)grid-column: 2 / span 3; */
}

7. 이름으로 배치하기

.container {
	width: 500px;
	height: 500px;
	display: grid;
	grid-template:
		repeat(2, 1fr) /
		repeat(2, 1fr);
	gap: 16px;
	grid-template-areas:
		". g"
		"r b"
}

.red {
	grid-area: r;
}

.green {
	grid-area: g;
}

.blue {
	grid-area: b;
}