CSS) [Grid] 반응형 웹 사이트를 위한 minmax, min/max-content, auto-fill/fit

반응형 웹(Responsive Web) 사이트 제작에 도움을 주는 요소들이 있다.

 

Grid cell에 관한 파라미터인데, 높이 또는 너비를 상황에 맞게 변화시켜준다.

 

주로 grid-template-columns / grid-template-rows 를 정의하는 repeat() 함수와 많이 쓰인다.

---

1) minmax

 

 

최소, 최대 길이를 지정한다.

 

예시와 함께 살펴본다.

 

  .container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, minmax(100px, 1fr));
    grid-template-rows: repeat(3, 100px);
    gap: 20px;
 }

 

minmax(100px, 1fr)로 설정했다.

 

이 뜻은, 각 셀을 100px 밑으로 줄어들지 않게 하며, 100px 이상일 경우에는 그리드 컨테이너의 너비에 맞게

비율로 그 너비를 정한다는 뜻이다.

 

 

 

첫 번째로, 창을 줄이다가 각 셀이 100px이 되자 더이상 줄어들지 않는 모습을 볼 수 있다.

 

늘리는 경우에는, 그리드 컨테이너의 비율에 맞게 모든 셀이 같은 비율로 늘어나는 모습을 볼 수 있다. (모두 1fr로 선언)

 

auto-fill, auto-fit 과 함께 많이 쓰인다.

---

2) min-content, max-content

 

 

fr 은 컨테이너의 너비를 비율로 계산하여 길이를 선언하는 방식이지만,

이처럼 컨텐츠를 기준으로 너비 또는 높이를 계산하는 방식도 있다.

 

그러므로, 컨텐츠에 따라 셀의 너비와 높이가 달라진다.

 

이번 예시에서는 너비만 다룬다.

---

1. min-content

 

  .container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, min-content);
    grid-template-rows: repeat(3, min-content);
    gap: 20px;
}

 

위 코드에서, 각 셀의 너비와 높이를 각각 min-content로 지정했음을 알 수 있다.

 

 

그리드 컨테이너의 공간이 충분함에도 불구하고, 모든 셀들이 각 셀에 속한 컨텐츠의 최소 길이만큼 너비가 정해졌음을 볼 수 있다.

 

이 때, 예를 들어서 높이를 min-content가 아닌 10px 등으로 아주 작게 정의한다면, 컨텐츠가 모두 나타나지 않고 짤릴 수 있으므로 주의해야 한다.

 

---

2. max-content

 

  .container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, max-content);
    grid-template-rows: repeat(3, max-content);
    gap: 20px;
}

 

아무리 컨텐츠가 길어도, 모든 컨텐츠가 다 나오도록 셀의 크기가 정해졌다. 

 

컨텐츠의 내용에 따라 셀의 너비가 다르다는 것을 더욱 확실하게 볼 수 있다.

 

위 예시에서 short 가 있는 셀의 너비가 max-content 길이보다 더 긴 이유는, 인접한 행의 셀의 max-content 에 맞춰졌기 때문이다.

 

 

min-content와 max-content 는 minmax와 같이 활용하기에도 좋다.

 

grid-template-columns: repeat(6, minmax(max-content, 1fr));

 

위 코드는, 아무리 줄여도 모든 컨텐츠가 나타나도록 한다.

 

반대로 늘이면 그리드 전체 너비의 비율에 맞게 모든 셀의 너비가 동일한 비율로 적용된다.

---

3) auto-fill / auto-fit

 

 

웹 사이트에서의 그리드를 만들다보면, 대부분 상황에서는 정확한 셀의 개수를 지정하여 만들지는 않는다(고 한다.)

 

만약 요소의 개수가 정해져 있다면, flex-box를 쓰면 될 일이다. 

 

 

하지만 정해져 있지 않은 상황에서는 auto-fill과 auto-fit 이 제격이다. 

 

이 둘은 repeat() 함수에만 쓰이고, minmax와 함께 활용해야 한다.

 

 

auto-fill과 auto-fit 의 차이점을 살펴보자.

---

1. auto-fill

 

auto-fill은, 부여된 사이즈(그리드 컨테이너) 안에서 화면에 cell을 최대한 많이 만들어주는 역할을 한다.

 

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

 

 

화면을 늘릴 수록, 셀이 생성될 수 있는 최소 너비인 100px 이상의 여유 공간이 생길 때마다 빈 셀이 하나씩 추가된다.

 

물론, 셀은 채워지지 않는다.

---

2. auto-fit

 

auto-fit은, 부여된 사이즈(그리드 컨테이너) 안에서 기존 셀을 화면에 동일 비율 너비로 채운다.

 

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

 

 

아무리 화면을 늘려도, 기존 요소들이 동일 비율로 같이 늘어나는 것을 확인할 수 있다.

(1fr과 같이 썼기 때문에 가능한 방식이다. minmax 없이 고정된 값을 부여한다면, 늘어나지 않고 그 길이를 유지한다.)

 

---

실습을 진행하면서 실용적인 측면에 대해 서술해볼까 한다.

 

auto-fill 과 auto-fit의 특징은 잘 알겠지만, 실제로 어떻게 쓰이는지가 더 중요하다고 생각한다.

 

 

위 예시는 그리드 컨테이너보다 컨텐츠로 채워지는 셀의 개수가 부족하면 볼 수 있다.

 

하지만 컨텐츠의 수를 충분하게 부여한다면, auto-fill이나 auto-fit이나 둘다 minmax에서 설정한 최소 너비로 셀의 너비가 고정될 것이다.

 

라인이 새로 생기더라도 마찬가지이다.

 

인접한 행의 셀의 너비를 따라야 하기 때문이다.

 

셀로 들어갈 컨텐츠가 충분하다면 flex-box의 wrap 기능으로 사용하게 되는 것이다.

 

 

그러면 위 실습의 특징을 활용할 수 있는 상황은 '컨텐츠의 수가 부족할 때'라고 볼 수 있다.

 

그런데 창을 늘릴 수록 컨텐츠의 크기가 고정되며 옆에 빈공간이 계속 생기는 현상이 보기 좋을까? 아니라고 본다.

 

그러므로, 반응형 웹 사이트를 만들면서 위 특징을 제대로 활용할 수 있는 방식은 auto-fit 이라는 결론이 나온다. 

(주관적인 생각)

 

 

컨텐츠가 부족하면 있는 컨텐츠로 그리드 컨테이너를 가득 채워놔야 이쁘지 않을까 싶다.

 

---

참고)

 

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

 

https://nomadcoders.co/css-layout-masterclass/lobby

 

https://www.youtube.com/watch?v=qjJR3qYCd54