CSS grid 정리

grid는 2차원적임. 일단 그리드를 선언하면 column과 row 값을 주어야 함 (디폴트 값이 없음)

 

.container{
  background-color: darkblue;
  display: grid;
  grid-template-columns: 40% 60%;
}

.item {
  background-color: tomato;
  border: 1px solid;
}

.item:nth-child(odd){
  background-color: blueviolet;
  border: 1px solid;
}

grid-template-columns: 40% 60%;

grid-template-columns: 4fr 6fr;

(같은 의미임 그러나 fr을 더 많이 씀)

가로로 4:6으로 표현됩니다.

.container{
  background-color: darkblue;
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-gap: 1rem;
}

.item {
  background-color: tomato;
  border: 1px solid;
}

.item:nth-child(odd){
  background-color: blueviolet;
  border: 1px solid;
}

grid-gap 그리드간의 공간을 줌

 

grid-template-columns: 40% 60%;

grid-gap: 1rem;

로 할 경우 1rem 만큼의 갭이 늘어나면서 40:60 을 유지하려는 성격 때문에 가로에 공간이 생겨버림.

 

---

grid-template-columns: repeat(3, 1fr);

 

1fr을 3번 반복하세요

 

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

로도 쓸 수 있음

 

---

grid-template-columns: 200px 6fr;

왼쪽 템플릿은 200px로 고정되고 오른쪽 템프릿은 6fr만큼 반응형이 됨.

---

그리드의 높이를 맞추어주기

 

.container{
  background-color: darkblue;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 300px;
  grid-gap: 1rem;
}

 

하지만 높이지정을 컨텐츠보다 작게 해준다면?

.container{
  background-color: darkblue;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 1rem;
}

 

다음을 사용하면 컨텐츠에 딱 맞출 수 있다.

.container{
  background-color: darkblue;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(2em, auto);
}

4번 박스는 2px에 맞춰진 것을 볼 수 있다.

 

---

본격적으로 배치해보자.

 

.container{
  background-color: darkblue;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(2em, auto);
}

.item {
  background-color: tomato;
  border: 1px solid;
}

.item:nth-child(1){
  grid-column: 1/4;
}

.item:nth-child(odd){
  background-color: blueviolet;
  border: 1px solid;
}

 

1번째 박스가 전체를 차지하도록 해보자. 

grid-column: 1/4 는 세로를 축으로 하여 가로방향으로 1부터 4까지를 차지한다는 이야기.

번호를 붙이는 순서는 다음과 같다.

 

---

세로로 합칠 때 박스의 자동 줄바꿈이 일어나지 않으려면 column을 설정해줄 필요가 있다.

4번을 아래로 셀병합을 해주고 싶을 때,

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

을 입력하면

4번 박스가 왼쪽으로 뒤바뀌어버린다.

이때 column의 시작점을 설정해서 고정시키는 방법이 있다.

 

.item:nth-child(4){
  grid-column: 3;
  grid-row: 2/4;
}

세번째 줄부터 시작하여 아래로 병합

 

물론 겹치는 것도 가능하다

.item:nth-child(4){
  grid-column: 3;
  grid-row: 2/4;
}


.item:nth-child(9){
  grid-column: 3;
  grid-row: 3/5;
}

 

4번과 9번이 겹쳐지는 것을 볼 수 있다

 

 

cssgridgarden.com/#ko