Grid- container

🧩 container에 사용할 수 있는 속성들이다.

grid-template-rows, grid-template-columns

grid의 rows와 columns의 너비를 지정한다.

.container {
border: 5px dashed orange;
display: grid;
grid-template-columns: 80px 50px 50px;
}

=> 세 개의 columns이 각각 80px, 50px, 50px의 너비를 갖게 된다. rows도 동일하게 적용하면 된다.

✔️비율로 설정하고 싶을 때는fr (fraction)을 사용한다.

grid-template-columns: 1fr 1fr 1fr;

✔️더 간단히 적고싶을 때는 repeat(columns/rows개수, 너비)를 사용한다.

grid-template-columns: repeat(4,80px);

---

grid-template-area

grid의 각 cells에게 이름표를 붙여서 원하는 위치와 비율로 grid를 만들 수 있다.

html에서는 class로 각 cell을 구분지어 놓고 (header, main, sidebar, footer...), css에서 각 class를 grid-area로 이름표를 붙여준다.

.header {
	grid-area: hd;
}

그리고 container에 grid-template-areas로 grid를 만들어 준다.

grid-template-areas:
	"hd hd hd hd"
    "ma ma . sb"
    "ft ft ft ft"

=> header가 4칸, main이 2칸 + 빈칸 + sidebar가 1칸, footer가 4칸인 grid가 완성된다.

---

row-gap, column-gap

row-gap: 20px;
column-gap: 50px;

=> rows 사이에 20px, columns 사이에 50px의 여백이 생긴다.

간단히 한 줄로 쓰고 싶을 때는

gap: 20px 50px;

=> 순서는 row, column

---

grid-auto-rows, grid-auto-columns

template의 사이즈가 미리 지정되어 있는데, 그 사이즈를 넘어서 rows/columns이 생성될 때 어떤 사이즈로 넣어야 할지 암시적으로 알려준다.

grid-auto-rows: 100px;

=> 100px 너비의 row를 넣어라.

---

grid-auto-flow

한정된 container 사이즈 안에서 다양한 사이즈를 가진 row와 column로 인해 중간에 빈공간이 생길 때가 있다.

ex) 가로 길이가 10px인 container에서 column 1,2,3가 각각 3px, 3px, 5px인 경우 column 3은 두번째 줄로 넘어가게 돼서 첫번째 줄에 빈 공간이 생긴다.

그럴때 그 다음으로 있는, 빈 공간에 딱 맞는 row/column이 빈 공간을 채울 수 있다.

grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

---

grid (shorthand)

/을 기준으로 앞에는 row, 뒤에는 column의 내용을 적어준다.

grid: auto-flow / 1fr 1fr 1fr;
grid: auto-flow dense / 40px 40px 1fr;

🧩 template => 명시적
🧩 auto => 암시적

❗️3가지 경우가 있다.

• row/column 둘 다 명시적인 경우
• row: 명시적 column: 암시적
• row: 암시적 column: 명시적

---

justify-content

flexbox처럼 grid에도 space-around와 space-between을 사용할 수 있다.

❗️바깥의 container의 크기가 안의 content보다 커서 남는 공간이 있어야 한다.

justify-content: space-around;
=> content 주변으로 (왼쪽 끝, 오른쪽 끝 포함) 동일한 간격이 주어진다
justify-content: space-between;
=> content 사이에 동일한 간격이 주어진다.
justify-content: center;
=> 가로의 가운데에 위치한다.

---

align-content

교차축을 기준으로 content를 어느 위치에 놓을지 지정한다.

align-content: end; : 왼쪽 맨 아래 위치한다.
align-content: center; : 세로의 가운데에 위치한다.
space-around, space-between도 동일하게 사용 가능하다 => 세로에 간격을 준다.

---

justify-items, align-items

grid의 한 칸 안에서 아이템을 어떻게 정렬할지 지정할 수 있다.

justify-items: start; : 한 칸의 시작점 (왼쪽 위)에 아이템이 붙게 된다.
justify-items: center; : 한 칸의 가로의 가운데에 아이템이 위치한다.
기본값: justify-items: stretch;

✔️ align-items도 동일하게 작동하고 세로 축 안에서 정렬된다.