2025-02-03T13:25:31

docs/08_CSS Grid.md

@@ -1,6 +1,195 @@
 # CSS Grid
-* display: grid
-* grid-template-columns, grid-template-rows
-* grid-column-gap, grid-row-gap
-* grid-area, grid-auto-flow
-* align-content, justify-content
+CSS Grid는 웹 페이지 레이아웃을 만들기 위한 강력한 2D(행+열) 레이아웃 시스템이야.
+> Flexbox가 1차원(가로 또는 세로) 정렬을 위한 도구라면, Grid는 2차원(가로+세로) 정렬을 위한 도구
+
+| 컨테이너 속성 | 설명 | 옵션 |
+|---|---|---|
+| grid-template-columns | 열 개수 및 크기 설정 |
+| grid-template-rows | 행 개수 및 크기 설정 |
+| grid-gap | 그리드 간격 설정 | = row-gap + column-gap = gap | 
+| grid-auto-rows | 자동 크기 설정 |
+| grid-auto-columns | 자동 크기 설정 |
+| grid-auto-flow | 아이템 자동 배치 방향 |
+| grid-template-areas | 그리드 레이아웃을 시각적으로 구성 |
+| align-items |  |
+| justify-content |  |
+
+| 아이템 속성 | 설명 | 옵션 |
+|---|---|---|
+| grid-column | 열 영역 지정 | = grid-column-start + grid-column-end |
+| grid-row | 행 영역 지정 | = grid-row-start + grid-row-end |
+| grid-area | 그리드 영역 지정 |
+| align-self |  |
+
+
+## CSS Grid 개념 및 기본 구조
+CSS Grid는 grid container(부모)와 grid items(자식)으로 구성됨.
+```css
+.container {
+  display: grid;
+} /* 이렇게 하면 .container 안의 모든 요소(grid items)가 그리드 아이템으로 변함! */
+```
+
+## Grid 컨테이너 속성
+Grid 레이아웃을 설정하는 부모 요소의 속성들
+
+### grid-template-columns
+그리드의 열(가로) 개수와 크기를 정의!
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+} /* 200px 크기의 열이 3개 생성됨! */
+```
+#### 반응형으로 자동 크기 조정
+fr 단위 사용
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} /* 각 열이 동일한 너비(1fr = 1 fraction)로 자동 조정됨! */
+```
+
+### grid-template-rows
+그리드의 행(세로) 크기를 정의!
+```css
+.container {
+  display: grid;
+  grid-template-rows: 60px 1fr;
+}
+```
+
+### grid-gap = gap = row-gap + column-gap
+그리드 아이템 간의 간격을 조절!
+
+* row-gap : 행 간격
+* column-gap : 열 간격
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px; /* 모든 열과 행 사이에 10px 간격 추가! */
+}
+```
+
+### grid-auto-rows / grid-auto-columns
+명시되지 않은 행 또는 열의 크기를 설정
+```css
+.container {
+  display: grid;
+  grid-template-columns: 200px 200px;
+  grid-auto-rows: 150px;
+} /* 설정된 열 개수보다 많은 아이템이 추가되면, 자동으로 150px 높이의 행이 생성됨! */
+```
+
+### grid-auto-flow
+그리드 아이템을 자동으로 배치하는 방향을 결정
+* row :	행 기준 자동 배치 (기본값)
+* column :	열 기준 자동 배치
+* dense :	빈 공간을 채우도록 자동 배치
+```css
+.container {
+  display: grid;
+  grid-auto-flow: column;
+} /* 아이템이 행이 아니라 열 방향으로 자동 배치됨! */
+```
+
+### grid-template-areas
+그리드 컨테이너에서 영역을 이름으로 정의하고, 자식 요소를 해당 영역에 배치할 수 있음!
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: 50px 1fr 50px;
+  grid-template-areas:
+    "header header"
+    "sidebar content"
+    "footer footer";
+}
+.header {
+  grid-area: header;
+}
+.sidebar {
+  grid-area: sidebar;
+}
+.content {
+  grid-area: content;
+}
+.footer {
+  grid-area: footer;
+}
+```
+
+## Grid 아이템 속성
+각 개별 아이템에 적용하는 속성들!
+
+### grid-column
+아이템이 차지할 열(column)의 시작과 끝을 지정
+```css
+.item {
+  grid-column: 1 / 3; /* 1번째 열에서 시작해서 3번째 열까지 차지 */
+}
+```
+#### 줄여서 작성 가능
+```css
+grid-column: span 2; /* 현재 위치에서 2칸 차지! */
+```
+### grid-row
+아이템이 차지할 행(row)의 시작과 끝을 지정
+```css
+.item {
+  grid-row: 2 / 4; /* 2번째 행에서 시작해서 4번째 행까지 차지 */
+}
+```
+### grid-area
+한 번에 행과 열을 설정할 수 있음! `grid-template-areas`에서 사용될 이름을 지정
+```css
+.item {
+  grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
+}
+```
+```css
+.header {
+  grid-area: header;
+}
+```
+
+### repeat(), minmax(), auto-fit, auto-fill
+복잡한 그리드 설정을 더 쉽게 만드는 기능들!
+#### repeat(n, 크기)
+반복 그리드 생성
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+} /* 1fr 크기의 열을 3개 자동 생성! */
+```
+#### minmax(최소, 최대)
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(100px, 1fr));
+} /* 열 크기가 최소 100px, 최대 1fr로 자동 조정됨! */
+```
+#### auto-fill
+그리드 크기에 맞춰 최대한 많은 열 생성
+
+#### auto-fit
+아이템이 존재하는 열만 생성, 빈 공간 제거
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+}
+```
+
+
+
+
+
+
+
+