[CSS] grid, 반응형 웹페이지

grid의 개념을 이해하는데 꽤 오래 걸렸다. 점점 약어가 많아지고 grid를 통해 반응형 웹페이지를 만들 수 있는 속성을 보자마자 머리 속이 백지가 되고 말았다. 많은 예제를 보고 clone coding 해보며 대충 감을 잡았다.

grid 를 이용한 반응형 홈페이지는 크기를 결정하는 속성인 grid-template-columns, rows(grid-area로 줄일 수 있지만 r-s, c-s, r-e, c-e 라는 복잡한 값 때문에 쓰질 않으려 한다) 에서 특별한 값을 부여하고 브라우저에 맞춰 바뀌게 된다.

결과물

PC, Tablet, Mobile

https://smthousand.github.io/2022_practice/02_grid-responsive/

코드 리뷰

<div class="main__container">
    <div class="item"><img src="images/poster_01.jpg" alt=""></div> <!-- 반복 -->
</div>

.main__container {
    padding: 0 80px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-rows: auto;
}

.main__container img {width: 100%;} /* 이미지 크기가 부모 공간에 fit 되기 위함 */

.main__container에 grid 속성을 부여하면 그 아래의 child(=.item) 을 정렬한다. 그 안의 셀 크기를 columns과 row로 지정하는데 영화 및 프로그램 포스터이므로 컨텐츠 비율이 동일하다. 그러므로 min-content, max-content는 이번 예제에서 사용하지 않는다.

min-content, max-content

<div class="container">
    <header>
        <h1>Welcome</h1>
        <p>Hello, World</p>
    </header>

    <main>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis laboriosam minima, optio ipsa accusamus quo aliquid doloribus fuga neque possimus aperiam nesciunt illo aspernatur repellendus voluptatibus nihil molestias perferendis. Voluptas?</p>
    </main>

    <footer>
        This is footer
    </footer>
</div>

.container {
    display: grid;
    grid-template-columns: min-content; /* or max-content */
    height: inherit;
}

크기를 부여할 때, min-content는 가장 작게 줄일 수 있는 컨텐츠(header > h1)에 맞추고, max-content는 가장 크게 늘릴 수 있는 컨텐츠(main > p)에 맞춘다.

repeat

repeat은 반복한다는 뜻으로 크기를 부여할 때 여러번 쓸 필요 없이 한번에 정리해준다. 예를 들어

.grid {grid-template-columns: 1fr 1fr 1fr 1fr;} ===
.grid {grid-template-columns: repeat(4, 1fr);}

위와 아래가 출력하는 값은 동일하다. 그러나 네 개의 셀을 1fr의 크기를 부여해주는 속성을 일일히 쓰는 것보다 repeat(4, 1fr)을 써주는 게 훨씬 보기 좋다. 이 중 4는 반복하는 횟수, 1fr은 크기다. 쉽게 풀어 .grid의 child는 각 부모 컨테이너 너비에 4분의 1 크기를 갖게 된다.

 

다시 한 번 코드를 보면

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

.main__container의 column은 auto-fit의 횟수를 가지며, minmax의 크기를 가진다.

minmax

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

minmax는 반응형 웹사이트를 만들 때 무척무척무척무척 유용한 속성값 중 하나다. minmax라고 선언하고 () 괄호 안에 최솟값과 최댓값을 정해주는데 min-width, max-width의 역할을 대신해준다.

 

auto-fill, auto-fit

auto-fill

auto-fit

auto-fill과 auto-fit은 반응형 웹페이지에서 부모 컨테이너 너비가 늘어나면 어떤식으로 어떤식으로 자식 셀을 처리할 지 정해주는 속성이다. auto-fill은 fill(채우다)에서 알 수 있듯 최솟값 100px의 크기의 셀을 계속 만들어내며 빈 공간을 채우고 있고, auto-fit은 fit(맞추다)에서 알 수 있듯 최댓값 1fr의 크기로 늘어나고 있다. 

주의

auto-fit에서 최댓값이 500px인 경우 px이라는 고정값을 가지기 때문에 부모 컨테이너 너비가 500의 배수가 아닌 이상 무조건 다음 줄로 내려가게 된다. auto-fit의 장점을 못살리는 셈이니 자식의 content가 보일 최솟값(즉 가장 작은 모바일에서 정상적으로 출력되야 하는 값)은 고정값으로 최댓값은 fr을 적극 활용하도록 하자.

 

결론

내가 만든 웹사이트를 다시 보게 되면 컨테이너에 포스터가 반복 정렬되어 있는데 auto-fit되어 빈 공간을 모두 채우고 있다. 만약 컨테이너가 커진다면 1fr 속성의 크기대로 밑줄의 포스터가 계속 올라와 계속 빈 공간을 채울 것이고, 작아진다면 minmax 속성이 발동(?)해 자식 셀이 가로 240px보다 더 줄어들지 않고 계속 다음 줄로 포스터를 보낼 것이다. 

 

가로 200px의 디바이스

참고로 최솟값보다 더 작은 크기라면 이렇게 깨지니 최솟값은 최대한 제일 작은 모바일 디바이스 기준으로 할 것.