[CSS]Grid의 모든 것

❓ 정의

- 1차원인 flex와 달리 grid는 2차원 레이아웃 시스템으로, 웹 페이지의 요소를 행과 열 단위로 배치할 수 있도록 도와주는 CSS 기능

- 부모 요소인 grid container와 자식 요소인 grid item으로 구성

---

💠 사용법

1️⃣ grid 선언

- grid를 사용하기 위한 첫 번째 단계다. container에 grid를 선언해준다.

.container{
    display:grid; 
}

---

2️⃣ grid-template-columns와 grid-template-rows 선언

- container에 grid를 선언한 후, grid-template-columns와 grid-template-rows 속성을 사용해 grid의 (열과 행)크기를 지정해준다.

- grid-template-columns : column(열)의 넓이(크기) 지정
- grid-template-rows : row(행)의 높이 지정

.container {
    display: grid;
    grid-template-columns: 350px 350px; /* colum1넓이 colum2넓이 */
	grid-template-rows: 200px 200px;  /* row1높이 row2높이 */
}

그런데 px로 선언하면 크기가 고정되므로 반응형 웹에선 적합하지 않다.

이 때 사용하는 것이 상대적인 크기를 지정하는 fr을 사용할 수 있다.

.container {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 컨테이너 안의 그리드 아이템을 1:1:1의 비율로 배치 */
}

속성값이 반복되면 repeat 함수를 이용해 간소화 할 수도 있다.

grid-template-columns: repeat(10, 1fr); /* repeat(반복횟수, 반복값); */

---

3️⃣ min-max함수

- 트랙의 크기를 최솟값과 최댓값으로 지정할 수 있는 함수

minmax(100px, 1fr)
minmax(200px, 50%)
minmax(30%, 100px)
minmax(100px, max-content)  /* 그리드 트랙을 차지하는 최대 콘텐츠 범위 */
minmax(min-content, 50%)    /* 그리드 트랙을 차지하는 최소 콘텐츠 범위 */
minmax(max-content, auto)   /* auto = max-content */

.container {
    display: grid;
    grid-template-columns: repeat(3, minmax(30px,300px)); /* 최소30px~최대300px */
}

---

4️⃣ grid-auto-rows & grid-auto-columns

- 사용자가 명시적으로 지정해준 grid-template-columns 또는 grid-template-rows 에서 벗어난 위치에 존재하게 될 때, 트랙의 크기를 암시적으로 지정하는 속성

- 기본적으로 grid에서 각 행의 높이는 지정해주지 않는 이상 콘텐츠의 크기를 가지기 때문에 그 크기를 통일시키고자 할 때 유용하게 쓰인다.

- 콘텐츠가 늘어날 때마다 css에 row의 개수를 수정할 필요 없이 자동으로 값이 적용된다.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
}

---

5️⃣ gap

- 그리드 컨테이너와 아이템 요소들의 간격을 설정하는 속성

.container {
    display: grid;
    row-gap: 0.5rem;    /* 상하 간격 */
    column-gap: 0.5rem;  /* 좌우 간격 */
    gap: 0.5rem;    /* 단일값: 상하 좌우 간격 동일하게 적용 */
    gap: 0.5 0rem;  /* 이중값: 순서대로 상하 간격, 좌우 간격 */
}

---

6️⃣ grid-column-start & grid-column-end & grid-row-start & grid-row-end

- 이 네 가지 속성을 이용해 각 grid 셀의 영역을 지정할 수 있다.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.grid1 {
    grid-column-start: 2;  /* 행은 grid line의 2부터 3까지 차지 */
    grid-column-end: 3;
    grid-row-start: 1;     /* 열은 grid line의 1부터 3까지 차지 */
    grid-row-end: 3;
}


.grid2 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}

하지만 너무 길고 가독성도 좋지 않으므로 grid-column & grid-row 속성을 사용해 축약형으로 쓰는 것이 좋다.

.grid1 {
     grid-column: 2 / 3;   /* 시작 / 끝 */
     grid-row: 1 / 3;
}

.grid2 {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

여기서 더 축약하고 싶으면 grid-area를 사용할 수 있다. 순서에 유의할 것.

.grid1 {
    grid-area: 1 / 2 / 3 / 3;  /* row 시작 / col 시작 / row 끝 / col 끝 */
}

.grid2 {
    grid-area: 3 / 1 / 4 / 3
}

---

7️⃣ grid-template-areas 

- 그리드 내 각 영역(Grid Area)에 이름을 붙여 배치하는 매우 직관적인 방법

- 각각의 아이템 요소가 차지하는 셀의 개수만큼 원하는 위치에 이름을 적어 영역을 지정해주면 지정한 자리만큼의 셀을 차지한다.

- 빈 영역을 만들고 싶으면 .(마침표)와 none으로 표기하면 된다.

.container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.5rem;
    grid-template-areas:
    "header header header header header"
    "main main main side side"
    "footer footer footer footer footer";
}

.header {
    grid-area: header;
}

.main {
    grid-area: main;
}

.sidebar {
    grid-area: side;
}

.footer {
    grid-area: footer;
}

참고: https://paullabworkspace.notion.site/Grid-70e79ceabe164b78b64eed62aba6127e