css)grid-repeat/minmax/auto-fill & auto-fit

📝참고자료

역시나 내가 사랑하는 유노코딩 선생님 자료

https://www.youtube.com/watch?v=xem0N8c9tWY&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=11 

 

 

✅실습을 통해서 보자!

1) repeat(반복횟수,수치 단위)

html 코드

 <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>
    </ul>

css코드

*{
  box-sizing:border-box;
}
body{
  margin:0;
}
ul{
  padding:0;
  list-style-type:none;
  border:5px solid teal;
}
li{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:beige;
  border:5px solid tomato;
  border-radius:8px;
}

.container{
  display:grid;
  height:500px;
  grid-template-columns: repeat(5,100px);
  gap:10px;
}

결과표

-   grid-template-columns: repeat(5,100px);

즉, 100px짜리 열을 5번 반복해라!

grid-template-columns: 100px 100px 100px 100px 100px; 과 같은말이다!

-

.container{
  display:grid;
  height:500px;
  grid-template-columns: repeat(2,100px);
  grid-template-rows:repeat(3,100px);
  gap:10px;
}

 

 grid-template-columns: repeat(2,100px);
  grid-template-rows:repeat(3,100px);

 

100px 짜리 열을 2번씩 반복해라

100px 짜리 행을 3번씩 반복해라

grid-template-columns: repeat(2,100px);

뒤에 나타난 100px부분은 1fr 등 의 단위로 표시될 수 있다.

 

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

2) gird-template-columns:repeat(반복횟수, minmax(최소단위, 최대 단위))

.container{
  display:grid;
  height:500px;
  grid-template-columns: repeat(2, minmax(200px,500px));
  grid-template-rows:repeat(3,1fr);
  gap:10px;
}

- grid-template-columns: repeat(2, minmax(200px,500px));

열을 가로방향으로 2번반복해서 배치하는데 최소 크기는 200px, 최대크기는 500px

즉 브라우저 크기를 늘릴때 브라우저를 아무리 늘려도 500px크기가 최대라서 남아있는 여유공간을 침범하지 않음

브라우저를 아무리 줄여도 200px 크기가 최소. 아이템 크기가 더 줄어들지 않는다.

그런데 여유공간이 남아버리면 좀 지저분하니까 저렇게 여백이 남았을 때는

- grid-template-columns: repeat(2, minmax(200px,1fr));로 지정하면 남은 공간을 다 차지해버리는 습성이있으니까

아래처럼 된다.

grid-template-columns: repeat(2, minmax(200px,auto));라고 설정해도됨

3) gird-template-columns:repeat(auto-fill, minmax(최소단위, 최대 단위))

 

auto-fill 을 하면 컨테이너의 여유공간이 빌수있고

auto-fit을 하면 컨테이너의 여유공간이 비지않고 가득 찬다!

.container{
  display:grid;
  height:500px;
  grid-template-columns: repeat(auto-fill, minmax(200px,auto));
  gap:10px;
}

현재 최소 길이는 200px인데, 최소 길이의 합보다 container 길이가 길어지는 경우 200px이 아이템의 갯수만큼 늘어난다.

이게 뭔말이냐?!?

 grid-template-columns: repeat(auto-fill, minmax(200px,auto));

 

아래와 같이 화면이 아주 작아질때는 최소 크기가 200px로 되면서 열이 반복된다.

200px로 2줄로 반복되는 걸 알수있음

 

그런데 브라우저 크기가 커지면 열 갯수가 점점 늘어난다

 

즉 브라우저 크기에 따라 열 갯수가 늘어나는 걸 볼수있다. 

브라우저 크기에 따라 열의 갯수가 유동적이라는것이다. 

브라우저가 점점 커질수록 최소 길이의 합 보다 너비가 넓어지는 컨테이너가 되어버리는데

 auto-fill 은 빈공간을 남기게된다. 

➡️반면에 auto-fit??? 어떻게 될까

.container{
  display:grid;
  height:500px;
  grid-template-columns: repeat(auto-fit, minmax(200px,auto));
  gap:10px;
}

콘텐츠가 컨테이너 너비에 맞추어서 늘어난다.

브라우저가 점점 커질수록 빈 공간을 남기는게 아니라, 

빈공간에 맞춰서 열의 크기가 더 늘어난다!