CSS3 Grid 사용기

들어가며

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

국내 웹 환경은 아직은 IE에서 온전히 해방되지 못했기 때문에 평소 활용하기 어려웠던 CSS3 grid 속성을 사용해 본 경험을 바탕으로 간단하게 소개해 볼까 합니다.

선언

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

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

<section class="container"></section>

.container {
  display: grid;
}

 

grid-template-columns, grid-template-rows

다음처럼 grid 속성 선언과 함께 열과 행을 표현할 수 있는 grid-template-columns 속성과 grid-template-rows 속성을 함께 사용하여 표현하고자 하는 레이아웃을 설계할 수 있습니다.

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

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

 

grid-column, grid-row

grid의 자식 엘리먼트들은 기본적으로 좌측 상단을 기준으로 한 칸씩 순서대로 나열됩니다. 그리드의 배치를 더 자유롭게 하기 위해서 grid-column 또는 grid-row 속성을 사용할 수 있습니다.

이 속성은 grid-column-start(grid-row-start) 속성과 grid-column-end(grid-row-end) 속성의 축약 속성으로 그리드 배치의 시작점과 끝점을 지정합니다.

<section class="container">
	<header></header>
	<article></article>
	<aside></aside>
	<footer></footer>
</section>

.container {
  display: grid;
  grid-template-columns: 150px auto 100px;
  grid-template-rows: 50px calc(100% - 80px) 30px;
}
header {
  background: rgba(255,0,0,.3);
  grid-column: 1/4;
}
article {
  background: rgba(0,255,0,.3);
  grid-column: 1/3;
}
aside {
  background: rgba(0,0,255,.3);
}
footer {
  background: rgba(255,255,0,.3);
  grid-column: 1/4;
}

다음과 같은 레이아웃이 될 것입니다.

 

grid-gap

grid 엘리먼트 사이사이의 간격이 필요하다면 grid-gap 속성을 사용할 수 있습니다. row-gap 속성과 column-gap 속성의 축약 속성입니다.

.container {
	display: grid;
	row-gap: 10px; // 행과 행사이 간격
	column-gap: 10px; // 열과 열사이 간격
}

 

grid-template-areas

더욱더 복잡한 레이아웃을 위해서 grid-template-areas 속성을 활용해 볼 수도 있겠습니다.

grid-template-areas 속성은 자식 엘리먼트의 grid-area 속성과 연계하여 더욱 복잡한 레이아웃을 설계할 수 있습니다.

.container {
  grid-template-areas:
    'header header header'
    'article article aside'
    'footer footer footer';
}
header {
  grid-area: header;
}
article {
  grid-area: article;
}
aside {
  grid-area: aside;
}
footer {
  grid-area: footer;
}

grid-template-areas의 문자열은 row를 의미하고 각 문자열에서 grd-area-name들은 column을 의미하며 빈칸으로 구분됩니다. 각 칸에 명시된 네이밍과 동일한 grid-area를 선언한 자식 엘리먼트들은 해당 위치에 자리 잡게 됩니다. 만약, 빈 영역을 두고 싶다면 grid-area-name 대신 . 을 선언하면 됩니다.

이해를 돕고자 다음 예제를 준비했습니다. 여러분을 향한 제 마음이에요.

말씀드린 내용 외에도 grid 속성은 더 많은 활용법을 가지고 있습니다. 표준 명세와 더 많은 활용법은 안내해 드리는 링크들에서 더 자세하게 확인해 볼 수 있습니다.

• 예제를 활용한 CSS 그리드 레이아웃 소개
• CSS Grid 레퍼런스
• A Complete Guide to Grid

 

Flex 와 Grid

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

flex

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

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

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

grid

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

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

• 샘플 출처 : https://tympanus.net/Development/MenuFullGrid/
• 관련 자료 : https://ayushgupta.tech/blog/grid-vs-flex

 

마치며

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

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

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

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

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

감사합니다.

---

(https://www.codingfactory.net/12419)