[CSS] Grid로 배치하기

 

# Grid

 

• 2차원 레이아웃으로 수직, 수평 정렬을 동시에 할 때 사용

 

📍 용어 정리

• Track : 행(row) 으로 된 한 줄, 열(column)로 된 한 줄을 의미한다.
• Line : 트랙과 트랙 사이의 간격을 의미한다.
• Cell : 하나의 칸, 즉 아이템이 배치되는 최소단위의 영역을 의미한다. 
• Area : 여러개의 칸, 즉 하나 이상의 셀로 이루어진 영역을 의미한다.  
• span : 그리드 선을 기준으로 확장하는 것을 의미한다. 

 

# Grid Container (부모요소에 적용)

 

1. display

• grid
• inline-grid

 

💡이 때, 그리드를 설정했다고 끝나는 것이 아닌 몇 개의 열과 몇 개의 행을 만들어  줄 건지 결정해줘야 한다.

 

 

2. grid-template-rows, grid-template-columns

• 명시적 행, 열의 크기를 결정한다.
• fr 단위 사용 가능
• repeat(갯수, 크기) 함수 사용 가능

 

예시 코드

.container {
  width: 350px;
  height: 250px;
  border: 10px solid salmon;
  display: grid;
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: 100px 100px 100px;
}

 

만약 높이값이 가변한다면 비율을 사용해 줄 수 있다.

 

.container {
  width: 350px;
  height: 250px;
  border: 10px solid salmon;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: repeat(3, 1fr);
}

 

3. grid-template-areas

• 명시적으로 각각의 영역의 이름을 지어서 이름 구조를 만들어 준다.
• 셀을 비워주고 싶을 때는 . 을 사용하면 됨

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

 

4. gap(grid-gap)

• row-gap(grid-row-gap), column-gap(grid-column-gap)
• 행과행, 열과열 사이의 간격을 지정한다.
• gap : 간격;
• 속성을 각각 사용해도 좋지만 보통 단축속성으로 많이 쓰인다.

 

💡 만약 셀들끼리 병합을 하고 싶다면 어떻게 할까?

.container {
  width: 350px;
  height: 250px;
  border: 10px solid salmon;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  border: 4px solid;
}

.item:nth-child(1) {
  grid-column: span 2;
}

.item:nth-child(2) {
  grid-row: span 2;
}

 

 

• 그리드는 행과 열을 만들어 놓고 셀과 셀을 병합해서 만드는 것
• 각 셀들은 지그재그 형태로 쌓인다. 
• 이 때, 아이템1과 아이템2가 각 두 개의 셀을 차지하면서 아이템5가 자리를 잃고 맨 밑 남은 여백에 자리를 차지하게 되는데 명시적으로 입력한 값에서 자리가 없기 때문이다. 이 때 밀려난 아이템5의 값을 암시적으로 입력해 줄 수 있다.

 

5. grid-auto-rows, grid-auto-columns

• 암시적으로 행,열의 크기를 결정한다. 
• 열(columns)의 경우 보통 좌우 스크롤이 쓰이는 경우가 거의 없어서 사용 빈도수가 떨어진다. 

 

💡 명시적과 암시적이 왜 필요할까?

→ 보통은 명시적으로 정해주지만 셀이 정확히 몇 개인지 모를 때의 경우를 위해 암시적인 것도 필요하다.

 

6. grid-auto-flow

• row
• column
• row dense(dense) : 각 행 축을 따라 차례로 배치, 빈 칸을 채운다. 이 경우 row 를 생략하고 dense만 사용 가능하다. 
• column dense: 각 열 축을 따라 차례로 배치, 빈 칸을 채운다. 
• 배치하지 않은 아이템을 어느 방향으로 흐르게 할지 자동 배치 알고리즘으로 정의한다. 

 

7. grid

• grid-template-xxx 과 grid-auto-xxx 의 단축 속성이다. 

 

8. align-content (수직 정렬), justify-content(수평 정렬)

• normal : stretch 와 같다. (✨기본값)
• start : 시작점 정렬 (위쪽, 왼쪽)
• center : 가운데 정렬 
• end : 끝점 (아래쪽, 오른쪽)
• space-around : 각 여백을 고르게 정렬
• space-between : 시작과 끝에 정렬하고 나머지 여백을 고르게 정렬
• space-evenly : 모든 여백을 고르게 정렬
• stretch : 축을 채우기 위해 그리드 콘텐츠를 늘린다. 
• 단, 그리드 컨테이너 내부에 여백이 있어야 정렬이 가능하다. 

 

 

9. align-items (수직 정렬), justify-items(수평 정렬)

• normal  (✨기본값)
• start 
• center 
• end 
• stretch
• 각각의 아이템들을 정렬해준다.
• 단, 각각의 셀 내부에 여백이 있어야 정렬 가능하다.

 

10. place-content, place-items

• align-content, justify-content 의 단축 속성
• 하나의 값만 입력하면 두 속성에 모두 적용된다. 

 

---

# Grid Item (자식요소에 적용)

 

1. grid-row, grid-column

• grid-row : grid-row-start / grid-row-end 의 단축 속성
• grid-column : grid- column-start / grid- column-end 의 단축 속성
• 각 속성은 '/' 로 구분한다. 

 

예제 코드

/* 확장 요소를 사용할 때 */
.item:nth-child(1) {
  grid-row: span 2;
}

/* 단축 속성을 사용할 떄 */
.item:nth-child(1) {
  grid-row: 1 / 3;
}

/* 각각의 속성을 사용할 때 */
.item:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
}

/* 음수를 사용할 때 */
.item:nth-child(1) {
  grid-row: 1 / -1;
}

 

 

→ 행의 개수와 상관없이 끝까지 사용하고 싶다면 음수를 사용할 수 있다.

 

💡 위에 사진처럼 1 ~ 4 까지 -1 ~ -4 까지의 숫자는 뭘까?

• 각 그리드 라인에 있는 숫자를 라인넘버라고 한다. 
• 이때 라인 넘버에는 라인의 이름을 정의할 수 있음!

 

2. grid-area

• grid-row-start, grid-row-end, grid- column-start, grid- column-end 의 단축속성
• grid-template-areas가 참조 할 영역 이름을 설정할 수 있다. 

 

3. align-self(수직 정렬), justify-self(수평 정렬)

• normal  (✨기본값)
• start 
• center 
• end 
• stretch
• 일괄로 정렬 해주는게 아닌 각각의 아이템을 개별적으로 정렬해줄 수 있다.

 

4. place-self

• align-self , justify-self 의 단축 속성
• 하나의 값만 입력하면 두 속성에 모두 적용된다. 

 

5. order

• 아이템의 순서를 변경하여 정렬할 수 있다.
• 숫자가 작을수록 앞에 배치된다.

 

6. z-index

• 아이템이 겹쳐졌을 때 쌓이는 순서를 변경할 수 있다.

 

 

 

📌 출처

박영웅 강사님 실시간 강의

CSS Grid 완벽 가이드