이번 주도 열심히 공부하고 있는 CSS이다. 고작 몇 번 작은 프로젝트(?) 해봤을 뿐이지만, 지금까지 웹 페이지를 작성하면서 처음에 레이아웃 잡고, 수 많은 < div > 들과 그 안에 복잡한 css 속성을 작성하고, 수정했던 과정을 생각하면...🤦‍♀️ 그런 점에서 '그리드(Grid)'라는 CSS 개념은 너무나도 👀눈이 번쩍 뜨이는 듯한👀 유용한 개념인 것 같다.

그리드 레이아웃?

그래서 그리드 레이아웃이 무엇이나면,
CSS의 레이아웃 시스템으로 2차원 레이아웃 구성으로 아이템들을 배치한다.
CSS의 또 다른 레이아웃 시스템인 'Flex-box'와 비슷하다고 생각할 수도 있는데,
Flex-box는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있고, Grid는 2차원으로 수평, 수직 방향 두 가지를 동시에 영역을 나눌 수 있다.

참고로 아래 작성하는 내용이 그리드 레이아웃 공부 기록 남기는 목적이기 때문에 기본 작성법과 gap 등 정말 기본적인 내용은 따로 작성하지 않았다. 우리에게는 공식문서인 mdn과 많은 기술 블로그가 있으니, 혹시나 '그리드' 개념이 처음이라 개념부터 궁금해서 구글링하다가 이 글을 발견하신 분들은 mdn과 다른 글을 더 추천드립니다...

grid-template-areas 로 빠르고 간단하게 배치하기

grid-template-areas 속성으로 우리는 그리드에 셀(cell)을 설정하고, 이름을 할당하여 간단하고, 빠르게 그리드를 설정할 수 있다.

이 속성은 전체적인 페이지 레이아웃 잡을 때 간단하게 사용하기 좋을 것 같다.
개인적으로 이 속성 설명을 들으면서 아직 JS 아가임에도 불구하고 리액트로 사이트를 구현하게 됐던... 프로젝트에서의 스타일링할 때 에피소드 하나가 떠올랐다. 열심히 < div > 태그로 나누고, 묶고 복잡하게 작성했었는데, 반응형 되니까 예제처럼 main과 sidebar 두 영역의 정렬이 무너져서 애먹었던 에피소드... 나중에 전체적인 페이지 레이아웃을 이 속성으로 잡고, 반응형 구현을 해보면 어떻게 될지도 보고 싶어졌다. 물론 이미 다들 이렇게 쓰고 있을지도...!

명시적 그리드, 암시적 그리드

명시적 그리드

명시적 그리드는 grid-template-columns 또는 grid-template-rows를 사용해 생성하는 것을 말한다. 이 속성은 그리드 생성 시 기본적으로 사용되는 방식이며, 우리는 레이아웃의 열 또는 행의 크기와 개수를 명시적으로 설정할 수 있다.

암시적 그리드

암시적 그리드는 콘텐츠(items)가 해당 그리드(container) 외부에 배치되는 시점에 생성된다. 이렇게 그리드 외부에 배치되는 콘텐츠에 대해서는 적절한 기본값이 생성되어 적용되는데, grid-auto-columns 또는 grid-auto-rows 속성으로 그리드 외부에 배치되는 콘텐츠들에 대한 값을 설정할 수도 있다.

Grid 단위

fr

fr단위는 해당 영역을 균등한 비율로 분배한다.

예시1은 1행 3열의 레이아웃으로 구성했다. 1열, 2열, 3열 모두 '1fr'으로, 1:1:1의 느낌이라고 생각하면 편할 듯 하다.
예시2는 2행 2열의 레이아웃이다. row는 2fr, 1fr로 설정했는데, 결과화면처럼 2:1의 비율로 영역이 설정됐다. columns는 1fr, 2fr로 설정했는데, 1:2의 비율로 설정된 것을 볼 수 있다.

참고로 fr단위는 전체 공간이 아닌 이용 가능한 공간을 분배한다. 따라서 행 또는 열의 영역 설정 중 절대적인 단위와 함께 쓰인다면, 전체 공간에서 절대적인 단위에 해당하는 값을 제외한 영역이 이용 가능한 공간이 되어, 그 공간 내에서 균등한 비율로 설정한 영역을 분배한다.

min-content, max-content

이름대로 min-content는 최소한의 콘텐츠 크기를, max-content는 최대한의 콘텐츠 크기를 설정해주는 속성이다. 언어 구조 특성상 이 속성은 콘텐츠 내용이 한글보다는 영어일 때 사용하기 적합하다.

• min-content는 띄어쓰기를 기준으로 콘텐츠를 나누어, 콘텐츠를 가장 작은 단위로 나눈 상태에서 그 최소한의 단위를 품을 수 있는 영역만큼 값을 설정한다.
• max-content는 콘텐츠 내용을 한 줄, 즉 최대 단위로 표현할 수 있을 만큼 값을 설정한다.

auto-fill, auto-fit

이 두 속성은 그리드 컨테이너 내부에 빈 트랙이 생길 때 그 공간을 어떻게 처리할 지에 대한 기능을 한다. 반응형 레이아웃 설정에 도움이 될 것 같은 속성이다.

• auto-fill은 빈 트랙이 생길 경우, 그 범위 내에서 가능한 많은 셀들을 만들어 채우려고 한다.
  단, 화면 상으로는 빈 트랙에 자동으로 채워진 셀들은 나타나지 않고 빈 공간처럼 보인다. 개발자도구 'grid'를 통해 자동으로 채워진 셀들을 확인할 수 있다.
• auto-fit는 빈 트랙이 생길 경우, 그 범위를 그리드 컨테이너 내부에 있는 콘텐츠들이 나누어 가져 빈 공간을 콘텐츠들로 딱 맞게 채운다. 화면 상으로는 빈 공간 없이 콘텐츠들로 꽉 찬 것을 볼 수 있다.

마무리
그리드 강의를 듣다가 grid-template-area 속성이 레이아웃 잡을 때 너무 유용할 것 같다는 생각에 이번 주 공부 기록으로 남겨두어야겠다고 생각했다. 작성하다보니 이 속성 외에도 그리드 속성 몇 가지를 함께 정리해보았다. 잘 작성한 건지, 이렇게 하는 게 맞나 싶다가도 글을 작성하면서 강의 내용 외 자연스럽게 구글링도 하게 되고, 예제 코드도 한 번이라도 더 따라 작성해보거나 직접 만들어보니 다른 내용보다는 더 많이 보고, 이해하려고 노력했다. 이렇게 쌓아가는거겠지! 현업에서도 활발하게 사용되는지는 모르겠으나, 앞으로 진행하게 될 프로젝트에서 사용해보면 좋을 것 같다.

참고한 글
MDN-Grids
Grid 자동 반복 채움/맞춤