🆚 Flex vs Grid

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

---

🧩 Grid

1.display: grid

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

2. 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;
}

3. repeat 함수

.container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}

---

Reference
https://studiomeal.com/archives/533