반응형 페이지를 위한 grid

YEONGHUN KO·2022년 1월 4일

CSS/SCSS - BASICS

목록 보기

3/13

짱구볼 너무 커엽다... 요번엔 요 볼따구 처럼 쭉쭉 늘어났다 줄어들었다 하는 웹페이지를 만들어 보자!

바로 auto-fill과 auto-fit이라는 property를 사용하면 된다!

auto-fill과 auto-fit은 사실 거의 비슷하지만 약간의 차이가 있다. column에 아이템이 추가될때마다 자동으로 wrapping되게 한다는 점에서 비슷하다. 그러나 auto-fill은 viewport의 크기가 늘어나면 그 빈 공간을 투명한 item으로 채우는 반면, auto-fit은 item의 크기를 늘림으로써 viewport의 빈공간을 채우게 된다.

이름 그대로 생각해보면 좀 더 이해가 쉬울 것이다.

우선 HTML부터 살펴보자.

auto-fill
<div class="grid-container grid-container--fill">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>

<hr>

auto-fit
<div class="grid-container grid-container--fit">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>

그리고 css를 다음과 같이 구성한다.

.grid-container {
    display: grid;
}

.grid-container--fill {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-container--fit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-element {
  background-color: deepPink;
  padding: 20px;
  color: #fff;
  border: 1px solid #fff;
}