[CSS3] Grid 란 ?

# 그리드의 기본적인 형태 정의

grid-template-columns

grid-template-rows

---

# repeat 함수 : 반복되는 값을 자동으로 처리할 수 있는 함수

repeat(반복횟수, 반복값)

ex. repeat(3, 1fr) = 1fr 1fr 1fr

---

# minmax 함수 : 최솟값, 최댓값을 지정할 수 있는 함수

ex. minmax(100px, auto) ➝ 최소한 100px, 최대는 자동으로 늘어나게 처리한다.

즉, 아무리 컨텐츠의 양이 적어도 최소한 100px의 값을 확보하며 컨텐츠 양이 넘쳐 100px을 넘어가면 알아서 영역이 늘어나게 된다.

---

# auto-fill, auto-fit : column의 갯수를 미리 정하지않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

* 차이점 : 셀의 개수가 영역에서 모자랄 경우,

auto-fit은 남는공간을 비율에 맞춰 꽉차게 채운다.

auto-fill은 부족한 영역을 채우지않고 정한 값만큼 영역을 차지한다.

---

# gap (row-gap, column-gap) : 간격 만들기

c.f IE에서는 gap의 대체속성 존재 X

---

# 그리드 형태를 자동으로 정의

grid-auto-column

grid-auto-rows

 

- rows의 갯수를 미리 알 수 있는 경우 : grid-template-rows 사용

grid-template-rows: repeat(3, minmax(100px, auto));

 

- rows의 갯수를 미리 알 수 없는 경우 : grid-auto-rows 사용

grid-auto-rows: minmax(100px, auto)

"grid-template-row의 통제를 벗어났다!"

➝ 굳이 횟수를 지정해서 반복할 필요 없이 "알아서" 처리가 된다.

---

# 각 셀의 영역 지정

grid-column

grid-column-start

grid-column-end

 

grid-row

grid-row-start

grid-row-end

 

// 주황색 영역 설정

.item:nth-child(1){

   // grid-column: 1 / 3;

   // grid-column: 1 / span 2;

   grid-column-start: 1;

   grid-column-end: 3;

 

   // grid-row: 1 / 2;

   // grid-row: 1 / span 1;

   grid-row-start: 1;

   grid-row-end: 2;

}

 

// 초록색 영역 설정

.item:nth-child(5){

   // grid-column: 1 / 3;

   // grid-column: 1 / span 2;

   grid-column-start: 1;

   grid-column-end: 3;

 

   // grid-row: 1 / 2;

   // grid-row: 1 / span 1;

   grid-row-start: 1;

   grid-row-end: 2;

}

---

# grid-area: rowStart / columnStart / rowEnd / columnEnd

grid-column와 grid-row를 하나의 규칙으로 표현가능.

 

.item:nth-child(1){

   grid-area: 1 / 1 / 2 / 3;

}

---

# 영역 이름으로 그리드 정의

grid-template-areas

.container{

  grid-template-areas: 
            "header header"
            "content footer"
            "content footer";

}

.item:nth-child(1){
  grid-area: header;
}
.item:nth-child(2){
  grid-area: content;
}
.item:nth-child(3){
  grid-area: footer;
}

---

# 아이템의 자동 배치

grid-auto-flow

 

---

# 아이템들의 세로 방향 정렬

.container{

   align-items:

       stretch / start / center / end;

}

---

# 아이템들의 가로 방향 정렬

.container{

   justify-items:

       stretch / start / center / end;

}

---

# 아이템들의 상하좌우 방향 정렬

.container{

   place-items: center center;

}

---

# 아이템들의 그룹세로 정렬

그리드 아이템들의 높이를 모두 합한 값 < 그리드 컨테이너의 높이 일때,

그리드 아이템들을 통째로 정렬한다.

 

.container{

  align-content:

      stretch / center / end / space-between / space-around / space-evenly;

}

---

# 아이템들의 그룹가로 정렬

그리드 아이템들의 너비를 모두 합한 값 < 그리드 컨테이너의 너비 일때,

그리드 아이템들을 통째로 정렬한다.

 

.container{

  justify-content:

      stretch / center / end / space-between / space-around / space-evenly;

}

---

# 아이템들의 그룹 상하좌우 정렬

align-content와 justify-content를 같이 쓸 수 있는 단축속성

 

.container{

  place-content: center center;

}

---

# 개별 아이템 가로 정렬

 

.item{

   justify-self:

      stretch / start / center / end;

}

---

# align-self와 justify-self를 같이 쓸 수 있는 단축속성

 

.item{

  place-self: center center;

}

---

# 배치 순서

.item:nth-child(1){ order: 3; }

.item:nth-child(2){ order: 1; }

.item:nth-child(3){ order: 2; }

---

# z-index

---

참고

studiomeal.com/archives/533

code.tutsplus.com/ko/tutorials/introduction-to-css-grid-layout-with-examples--cms-25392