CSS3 Grid 사용기

CSS3 grid를 사용해본 경험에 대해 간단히 이야기 해보겠습니다.


들어가며

최근 진행했던 프로젝트는 폐쇄적인 환경 특성상 IE 테스트의 제약이 없었습니다. 크롬 엔진 기반의 웹뷰어가 탑재된 웹 애플리케이션 환경이었는데, 아시다시피 크롬 엔진은 최신 CSS3 명세를 적극 지원하고 있기 때문에 다양하고 새로운 CSS3 속성을 마음껏 활용해 볼 수 있는 장점이 있었습니다.

국내 웹 환경은 아직은 IE에서 온전히 해방되지 못했기 때문에 평소 활용하기 어려웠던 CSS3 grid 속성을 사용해 본 경험기를 이번에 다루어볼까 합니다.

선언

간단한 사용법부터 알아보겠습니다.

부모 엘리먼트에 grid 속성을 선언해 주면서 시작합니다.

<section class="container"></section>
.container {
  display: grid;
}

보다 다채롭게 사용하기 위해서 부가 속성들을 선언합니다. 경우에 따라서는 자식 엘리먼트와 연계된 속성 선언이 필요한 경우도 있습니다.

// 열 만들기
.container {
  display: grid;
  grid-template-columns: 100px auto calc(30% - 100px); // 다양한 단위를 마음껏 활용하며 나의 지식을 뽐내봐요
}

// 행 만들기
.container {
  display: grid;
  grid-template-rows: repeat(5, 20%); // 20%의 높이를 가지는 5개의 행
}

다음 코드는 보편적인 뉴스 페이퍼형 레이아웃을 grid로 간단하게 풀어본 모습입니다.

더욱더 복잡한 레이아웃을 위해서 grid-template-areas 속성을 활용해 볼 수도 있겠습니다. 아래는 여러분을 향한 제 마음이에요.

더 많은 활용법은 안내해 드리는 링크들에서 더 자세하게 확인해 볼 수 있습니다.


Flex 와 Grid

우리는 레이아웃 설계를 위해서 flex 속성도 자주 사용합니다. 유연한 설계가 가능한 flex 속성은 현재 가장 보편적으로 사용되는 레이아웃을 위한 속성일 것입니다.

flex

flex-box는 다양한 단위를 활용하여 내 맘대로 주무를 수 있지만 수평 또는 수직으로 연속되는 선형적인 구조만 가질 수 있습니다.

.container {
  display: flex;
  flex-direction: column;
}

flex에 대해서 더 궁금하시다면 이 포스팅을 읽어주세요!

grid

반면에 grid는 앞선 예시처럼 격자형 구조를 가지기 때문에 입체적으로 설계가 가능하다는 장점이 있습니다. grid 속성에 익숙해진다면 다음 샘플과 같은 다소 복잡해 보이는 레이아웃도 충분히 설계할 수 있습니다. 함께 안내해 드리는 관련 자료 링크도 읽어보시면 도움이 될 것입니다.


screenshot1

▲ 잘 개 쪼갠 grid를 선언하고 자식 엘리먼트들을 grid-area 속성을 이용하여 원하는 곳에 배치한 것으로 보여요.


마치며

아시다시피 grid 속성은 모든 IE에서 온전하게 사용할 수 없습니다.

IE11의 경우 적용시키는 방법이 있긴 하지만 프리픽스를 이용해야 하기 때문에 중복되는 속성 선언이 불가피하게 됩니다. (https://www.codingfactory.net/12419)

익스플로러 계열의 점유율이 한 자릿수까지 떨어져 있고 MS까지 나서서 열심히 퇴출 운동을 한지 꽤 오랜 시간이 흘렀으며 새로 출시된 운영체제인 윈도우 11에서는 아예 그 자취를 감춰버렸습니다만, 실무를 보면서 체감하는 바는 아직까지는 국내 환경에서는 IE를 무시하기엔 어려운 상황이라고 생각됩니다.

그럼에도 불구하고 혹시라도 사용해 볼 기회가 있다면 한번 적극 사용해 보시길 추천드려요. 아직 지원율이 바닥 수준이지만 얼마 전 추가된 masonry 스펙도 너무나 기다려지는 부분이죠.

여러분도 한번 grid 속성이 잘 사용된 예시를 찾아보고 친해지는 계기가 되길 바라면서 이만 글을 마치겠습니다.

감사합니다.