grid

여러개의 박스를 규칙적으로 놓아야할 때 ex) 쇼핑몰 상품

-행(row): 가로 방향 줄
-열(column): 세로 방향 줄
-Grid Container-> display: grid를 준 부모 박스

• Grid item-> 컨테이너 안에 들어있는 자식 박스들

display: grid;
-블록 요소처럼 한 줄을 차지하는 그리드 컨테이너
display: inline-grid;
-내용 크기만큼만 차지하는 인라인 그리드

grid-template-columns: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);

flex vs grid

-grid: 2차원(가로 세로)
-flex: 1차원(한 방향 위주)

<div class="page">
	<header>헤더</header>
	<aside>사이드바</aside>
	<main>메인 컨텐츠</main>
	<footer>푸터</footer>
</div>

.page {
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-rows: 80px 1fr 60px;
	gap: 10px;
	height: 100vh;
}

header {
	grid-column: 1 / 3;
	background-color: #eee;
}

aside {
	background-color: #ccc;
}

main {
	background-color: #ddd;
}

footer {
	grid-column: 1 / 3;
	background-color: #aaa;
}