display:flex
이제 아마 요즘 설치된 브라우저 기준으로 display: grid 기능이 거의 대부분 작동할 것이다. 이 표준이 아직도 완성된 표준이 아니라는 점은 함정이지만, 아직 새로 추가되는 속성이 있고 실험적인 기능도 있지만, 지금 기능으로도 원하는 레이아웃은 뭐 충분히 가능하다.
그 중 제일 고민되는게 바로 이거일 것이다. 바로 일정 부분 넘어가면 자동으로 열을 맞추는 기능 말이다.
display:flex 로 레이아웃 설정 시 flex-wrap: wrap 속성을 줘서 부모 넓이 이내에 컨텐츠가 감당이 되지 않을 경우 다음 행으로 보내는 기능이 있다.
하지만 diaplay: grid 에서 레이아웃을 짤 때는 직접적으로 지원하는 속성이 없으니 grid-template-columns 속성에서 지정된 열만큼 반복하거나 열을 정하는 식으로 했었다.
해결 방법: minmax + min
하지만 참고 문헌에서 참고하여 자동으로 반응형 그리드를 그리는 방법이 발견되었다.
.auto-css-grid {
--min: 240px;
display: grid;
grid-gap: 1rem;
/* min() 에다가 100% 를 넣으면 항상 컨텐츠 크기가 스크린 넘는 현상을 방지할 수 있다! */
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}끝. --min 에다가 넣고싶은 크기를 넣으면 된다. 픽셀, rem, ch 등등...
그렇다. 열을 배치하기 위한 최소한의 크기를 지정하면 되는 것이다.
예를 들어, 240px 를 설정하면, 부모 크기가 240px * (열개수) + 여백 + 간격 에 만족하면 자식의 열 개수를 늘리는 구조이다.
그리고 auto-fit 반복 속성은 무슨일이 있어도 항상 일정하게 자식에게 크기 개수 만족 시 열을 유동적으로 늘려나가는 속성이다.
만약 열 넓이의 최소값을 주지 않으면, 최소값은 0이나 다름없다. 하지만 0이면 크기 나누기 연산에 지장이 발생하기 때문에 브라우저에서는 최소값을 주지 않을 경우 기본적으로 1px 라 가정하고 컨텐츠를 나눈다. auto-fit 가 기본적으로 자식 개수만큼 거의 무한정(?) 열을 늘려나가는 것이 이 때문이다.
작동되는 예시 보고 싶다고? 참고 문헌 중 2번째인 Smol Responsive CSS Grid 참고하면 된다. 친절하게 크기 조절해서 결과를 확인할 수 있다.
flex-wrap와의 차이점
먼저 flex 와 grid의 차이점을 알 필요가 있다.
- flex는 자식이 크기와 자리 차지 여부를 결정한다.
- grid는 부모가 크기 및 자리 차지 비율을 결정한다.
가장 기본적인 차이점이다. 그래서 flex의 장점은 자식이 각각 크기가 오락가락해도 되고, flex-wrap 설정하면 부모 넓이에 다다랐을 때 알아서 아래로 밀어준다.
grid는 자식 크기와 비율을 부모가 결정한다. 그래서 grid 레이아웃은... 물론 설정하기 나름대로 오락가락이 가능하긴 하지만, 기본적으로 일정한 크기를 잡으려 할 때 많이 쓴다. <table> 태그와 같이 표 대용으로도 많이 쓰이기도 하다.
어따가 써먹어?
진정 프론트엔드 개발자라면 이 이미지만 보고도 감이 와야 한다.
그래. 가격 목록이나, 장점이 담긴 카드 등... 쓸 곳이 은근 많은데 이를 편하게 해결할 수 있는 길이 생겼다. 일정한 크기에 스크린에 따라 일관성 있는 레이아웃을 제공하는 게 바로 그리드 레이아웃의 강점이 아니겠느냐. 위 CSS 소스에 최소 크기 정해놓기만 하면 세팅 끝이다.
만능은 아니다.
그렇다. 여기까지 테스트해보고 한계를 알아차렸다면 역시 넌 프론트엔드 개발자의 자질이 있다.
위 예시가 문제가 뭐냐면 홀수개의 자식이 있다고 칠 때, 부모가 주어진 크기에 따라 2x2 그리드 상황이 올 경우가 생길 수밖에 없다. 위에 2개, 아래 1개로 그리드가 잡히면 경우에 따라 예쁘게 나오지 않을 수 있다. justify-content 설정하면 예를 들어 가운데로 잡아서 좀 일관성을 잡을 수 있기는 하지만... 디자이너가 이를 보면 전래전래전래동화.
저럴 경우 차라리 그냥 모바일 환경은 1개, PC 환경은 3개로 고정하는 방법이 예쁘게 보일 수 있다. tailwindcss로 예를 들면, grid md:grid-cols-3 이렇게 말이지.
끗?
ㅇㅇ 끗.
참고 문헌
