css grid 조금 더 알아보기 2

▼▽ Grid가 처음이신 분들은 이전 포스팅을 한번 보시고 오시길 추천드립니다. :) ▼▽

[IT기록 - 개발자/CSS] - css grid 세상에서 가장 쉽게 이해하기

[IT기록 - 개발자/CSS] - css grid 조금 더 알아보기 1

css grid 세상에서 가장 쉽게 이해하기

---

css grid 조금 더 알아보기 두 번째입니다. 이번에는 grid-template의 더 다양한 기능에 대해 알아보겠습니다.

 

1. grid-template : 화면 크기 변화에 따른 contents의 시각적 변화

그리드를 정렬하고 화면을 줄였을 때, 화면에 어떻게 보이는지에 대해 알아보겠습니다. 

예시 : grid-template: repeat(2, 1fr) 

  ● repeat (2, 1fr)

       화면 사이즈가 줄면 준대로 각 contents box 사이즈가 줄어듭니다.

  ● repeat (2, 100px)

       화면 사이즈가 줄어도 각 contents box 사이즈는 100px로 고정되어 줄어들거나 늘어나지 않고, 화면 너머로 사라집니다. 화면 사이즈가 줄어서 있을 곳이 없기 때문이죠.

  ● repeat (2, auto)

       자동으로 column의 개수로 나눠져서 길이가 정해집니다. 화면의 사이즈에 따라 길이는 자동으로 달라집니다.

  ● repeat (auto-fit, 1fr)

       column이 한개만 생기게 됩니다. auto-fit은 화면에서 가능한 한 많은 부분을 차지하려고 하려는 성질이 있습니다. 때문에 1fr을 하게 되면 column은 단 한 개만 생깁니다.

  ● repeat (auto-fit, 100px)

       각 contents box의 사이즈는 100px로 유지됩니다. 하지만 화면 사이즈에 따라 다음 줄로 내려옵니다.

2. grid-template-areas : grid container(item)을 정렬하는 새로운 방법

노동의 냄새가 나지만 잘하면 정렬하기에 매우 편리해 보이기도 하는 것입니다. 예시를 먼저 보여드리겠습니다.

 

  See the Pen https://codepen.io/saea/pen/dEQrJG/">
  언타이틀드 by kim jihae (https://codepen.io/saea">@saea)
  on https://codepen.io">CodePen.

grid에 grid-template-areas: "a b c"; "a b c"; "a b c"; 의 형식으로 layout을 써넣은 후, 원하는 item의 class-name을 선택하여(. class-name) grid-area: a; 의 형식으로 적어 넣으면 그 위치에 그대로 정렬이 된다. 

단, 주의할 점은 1번 tiem을 갑자기 젤 우측 하단으로 보낸다는 경우는 원하는 대로 안될 수 있다는 점 참고하시기 바랍니다.