[CSS] grid 정리 (2) : grid-column & row, grid-template-areas

 

 

💡 그리드 컨테이너 내 그리드 아이템에 주어지는 속성에 대해 알아보자.

 

✳️ grid-column & row : 그리드 컨테이너의 줄 번호를 이용해 아이템을 배치한다.

 

기본 세팅! 6개의 리스트를 2열 3행으로 ~

<ul class="container">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">6</li>
</ul>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
  border: 5px solid aquamarine;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lemonchiffon;
  border: 5px solid pink;
  border-radius: 10px;
}

.container {
  display: grid;
  height: 300px;

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

행 1, 2, 3, 4번 줄! 열 1, 2, 3번 줄 까지 있는 상태 👀

 

 

⬇️ grid-row : 1 에 설정해 보자! 열 끝까지!

1 이 1 번 줄에서 3 번 줄까지 차지하고넘친 6 은 밀려난다.

li:nth-child(1) {
  grid-row: 1 / 3;
}

 

⬇️ grid-column : 1 에 또 설정해 보자! 행 끝까지!

li:nth-child(1) {
  grid-row: 1 / 3;
  grid-column: 1 / 4;
}

 

❗️ 1번이 세로 1 ~ 2 번 줄 까지, 가로 1 ~ 3 번 줄 까지 차지

❗️ 2번이 세로 1 ~ 3번 줄 까지 차지

li:nth-child(1) {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

li:nth-child(2) {
  grid-row: 1 / 3;
}

 

✳️ grid-row-start & grid-row-end  그리고 grid-column-start & grid-column-end

사실 grid-column & row 는 단축 속성이다. 시작과 끝 값을 따로 설정해 보자!

li:nth-child(2) { /* 2 에 설정 */
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
}

 

✳️ grid-template-areas : 그리드 영역(아이템)의 이름을 이용해 레이아웃 형태를 정의한다.

✳️ grid-area : 그리드 영역(아이템)의 이름을 지정할 때 사용하는 속성, li 에 주어짐

 

우선 컨테이너 설정을 3행으로 하고 li 마다 이름을 준다.

.container {
  display: grid;
  height: 500px;

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

li:nth-child(1) { grid-area: a; }
li:nth-child(2) { grid-area: b; }
li:nth-child(3) { grid-area: c; }
li:nth-child(4) { grid-area: d; }
li:nth-child(5) { grid-area: e; }

 

⬇️ areas 를 지정해 보자 ~ (컨테이너에 작성하며 공백의 갯수는 상관없다. 이름에 따라 잘 띄워두기.)

grid-template-areas:
    "a a a"
    "b b b"
    "c d e";

 

❗️ 주의할 점은 아이템들이 직사각형 형태로 붙어있어야 한다!

grid-template-areas: /* e 처럼 혼자 동떨어져 있거나 */
    "e a a"
    "b b b"
    "c d e";
    
grid-template-areas: /* 요런 모양이면 안된다. */
    "a a a"
    "b b e"
    "c e e";

 

➕ 특정 칸을 비워두고 싶을 땐 이렇게 . 을 찍어준다!

grid-template-areas:
    "a a a"
    "b b ."
    "c d e";