[CSS_study] display : grid_8 auto-fit & auto-fill

Study/HTML,CSS

[CSS_study] display : grid_8 auto-fit & auto-fill

갈푸라떼 2022. 5. 18. 00:32

* auto-fit & auto-fill

repeat() 함수 안에서만 동작한다.
이 둘을 이용하면 responsive website(반응형 웹사이트)를 손쉽게 만들 수 있다.

즉, 대부분의 경우 repeat()의 첫번째 인자로 직접 숫자를 쓰는 것보다 auto-fill, auto-fit
둘 중 하나를 쓰는 경우가 좋은 방법이다.

* auto-fit은 유동적인 사이즈를 위해서 사용되고 auto-fill은 정확한 사이즈를 위해 사용된다.

element들을 같은 사이즈로 맞추고싶다면 auto-fill
element들의 크기도 커졌으면 좋겠다면 auto-fit

(참고) auto-fill에 하나의 요소가 추가되면 빈공간에 할당된다.

(참고) auto-fit에 하나의 요소가 추가되면 row안에 맞추기 위해서 다른 element들의 사이즈가 조금 줄어든다.

* auto-flll

우리가 정해준 크기 안에서 가능한 한 많은 빈 column(row)를 만들어준다.
(남는 공간을 빈 cell로 가득 채움)

* auto-flll 예시 그림

* auto-fit

현재 element를 stretch해서 colum(row) 딱 맞게(fit) 해준다.
(남는 공간에 현재 요소를 stretch해서 가득 채움)

(참고) CSS를 연습할 때는 firefox 브라우저가 가장 좋다고 한다. Live Server는 가끔 CSS가 먹통이 될 수 있으니 CSS 연습할 때만은 사용을 지양하는 것이 좋은 것 같다

* auto-fit 예시 그림

* auto-fit & auto-fill 예시코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    auto-fill
    <div class="grid">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
    auto-fit
    <div class="grid">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </body>
</html>

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-auto-rows: 100px;
  margin-bottom: 30px;
}

.item:nth-child(odd) {
  background-color: #2ecc71;
}

.item:nth-child(even) {
  background-color: #3498db;
}

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

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