grid는 써야겠는데 또 flex같은 기능은 필요하고... 그럴 때?🤔
grid형식은 써야겠고 최소값과 최댓값이 있지만 한 행에 요소가 몇 개냐에 따라 너비가 꽉차거나 or 차지않거나 해야함 + 그와중에 화면이 줄어들면 알아서 flex-wrap처럼 자연스럽게 떨어졌으면 좋겠다. ...라고 생각해서 찾아본 속성🤯
놀랍게도 grid에 방법이 있었다...
auto-fill 과 auto-fit 에 대해 알아보자.
<div class="container">
<div class="contain"></div>
<div class="contain"></div>
<div class="contain"></div>
</div>auto-fit 과 auto-fill 은 CSS Grid 레이아웃에서 repeat() 함수와 함께 사용되어 그리드 항목을 자동으로 채우는 데 사용된다.
이 둘은 유사해 보이지만, 그리드 항목의 배치 방식에서 차이가 있다.
auto-fill
가능한 한 많은 그리드 트랙을 만들어 채우는 데 중점을 둔다.
빈 트랙이라도 포함시켜 그리드 컨테이너에 최대한 공간을 채운다.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}이 경우, 각 그리드 항목은 최소 150px의 너비를 가지며, 컨테이너의 너비에 따라 가능한 많은 칸이 생긴다.
*빈 공간이 남아도 트랙이 유지됨
👆 보이는 것처럼 화면너비에 따라 1fr(최소너비 150px)인 contain 요소가 3개 나타나고, 150px인 빈 칸 요소가 생긴 것을 볼 수 있다.
이는 최소너비 150px을 차지하는 빈 칸이 2개 이상 생길만한(300px이상의) 공간이 남기때문에 자동으로 빈칸이 생성된 것이고, 그 나머지를 contain 요소가 먹는 방식이다.
첫 화면에 보이는 contain박스의 너비는 159px이었음.
⬛159px ⬛159px ⬛159px ⬜150px ⬜150px
auto-fit
컨테이너의 너비에 따라 가능한 많은 칸을 생성하되, 빈 칸은 축소되어 사라진다.
즉, 실제로 콘텐츠가 있는 칸만 표시됨.
이 경우, 사용 가능한 공간에 맞게 그리드 항목을 배치하며 빈 트랙은 표시되지 않는다.
👆 보이는 것처럼 화면너비에 따라 1fr(최소너비 150px)인 contain 요소가 3개 나타나되, 화면에 꽉차는 것을 볼 수 있다.
화면이 줄어들 경우, 하나 이상의 contain 요소가 150px 이하가 되면 flex-wrap처럼 아래로 떨어지며 떨어지지 않은 요소들이 다시 화면을 꽉 채우게 된다.
2줄로 떨어진 화면에서의 contain박스의 너비는 224px이었음.
⬛224px ⬛224px -- 1줄
⬛224px -- 2줄 (떨어진 요소는 화면에 꽉 차지 않고 윗 줄 요소들과 동일한 너비를 갖게 된다.)
💡 차이점 요약
auto-fill: 그리드에 빈 칸을 포함하여 공간을 최대한 채움
auto-fit: 빈 칸을 없애고, 그리드 항목만을 표시하여 공간을 최적화함
*브라우저 호환성: 옛버전 브라우저 제외한 대다수에서 사용 가능 [Global = 95.72%]
🤯말로 설명하기 어렵지만 어쨋든 활용하기 좋은 속성인 듯 하다.
