Must Know - CSS Grid (CSS 그리드)

August 14th 2018

Must Know - CSS Grid (CSS 그리드)

목차 - CSS GRID란? - CSS GRID 기본 구성도 - CSS GRID 용어 정리 - 기본 CSS GRID 만들어 보기 - fr 단위 및 repeat 속성 - GRID ITEM 배치하기

CSS GRID란? 기존의 웹페이지에서 화면의 레이아웃을 구성하기 위해서는 html 요소의 display 속성을 inline으로 변경 후 float 속성을 추가해서 화면을 구성했습니다. float을 이용해 레이아웃을 구성하면, 다른 행의 요소에 영향을 주지 않기 위해 clear를 해주어야 하고, 화면에 원하는 대로 배치하는 것이 까다로운 편입니다.

CSS Grid를 이용하면 float 속성 없이 레이아웃을 구성할 수 있고, 더 적은 코드의 html과 css코드를 사용해 웹페이지를 작성할 수 있습니다. 또한, flexbox와 함께 사용하면 원하는 대부분의 레이아웃을 더욱 쉽게 구성할 수 있습니다. 그리고 flexbox와 마찬가지로 반응형 웹 구성도 쉽게 처리할 수 있습니다.

CSS GRID 기본 구성도 - 위의 표는 아래의 코드와 같이 하나의 html요소에 6개의 자식 요소가 포함된 html 태그입니다. - 기본적으로 CSS grid를 적용하기 위해서는 wrapper html요소의 display 속성을 grid로 변경해 주어야 합니다. - 위와 같이 wrapper의 display 속성을 grid로 변경하면, wrapper의 자식 요소들을 grid아이템이 됩니다.

<div class="container">
  <div class="item item--1"></div>
  <div class="item item--2"></div>
  <div class="item item--3"></div>
  <div class="item item--4"></div>
  <div class="item item--5"></div>
  <div class="item item--6"></div>
</div>

CSS GRID 용어 정리

\- 위의 표는 Grid container와 grid item의 주요 속성을 정리한 것입니다. \- 처음에는 표를 봐도 눈에 안 들어오기 때문에, 아래의 내용을 바탕으로 grid를 조작하며 몸에 익힌 후 표에 정리된 속성을 다시 머리속에서 한번 더 정리를 하면 좋을 것 같습니다.

기본 CSS GRID 만들어 보기

\- 모질라사의 웹브라우저인 Firefox 개발자도구를 실행시킨 후, 웹 화면을 캡처한 것입니다. 평소 Chrome을 사용하지만, Grid를 개발할 때에는 파이어폭스 개발자 도구의 Grid 용 기능을 이용하는 것이 수월합니다. \- wrapper 요소인 클래스 명이 Container의 display를 grid로 변경해 줍니다. \- 개별 그리드 생성을 위해 아이템의 크기를 padding 및 font-size를 이용해 지정해 줍니다. \- container 요소에 'grid-template-rows'와 'grid-template-columns'를 지정해 줍니다. \- 'grid-template-rows'를 이용해 가로 행의 두께와 수를 지정할 수 있습니다. \- 'grid-template-columns'를 이용해 세로 열의 두께와 수를 지정할 수 있습니다.

See the Pen CSS Grid Practice -1 by CHANWHE KIM (@CHANWHE_KIM) on CodePen.

fr 단위 및 repeat 속성 위의 그리드에서는 150px column 두 개와 1fr column 한 개를 배치했습니다. 이 경우 1fr은 container의 나머지 공간을 차지하게 되어 위와 같은 레이아웃을 생성합니다.

CSS GRID에서 fr단위는 매우 유용합니다. fr은 fraction(분수)를 의미하며, 남아있는 공간을 분수로 표현한 단위입니다. 한 Grid track에 한 요소만 1fr로 지정되어 있다고 한다면, 그 요소는 남아있는 공간의 모든 공간을 차지하게 됩니다. 만약 두 개의 요소가 각각 1fr로 지정되어 있다면, 두 요소는 동일간 크기로 남은 공간을 차지합니다.

repeat 속성은 여러개의 row나 column을 지정할 때, 넓이가 같다면 한 번에 여러개의 열 또는 행을 생성할 수 있습니다. 아래의 코드에 코멘트 처리되어 있는 코드를 하나씩 적용해 보며 fraction 단위와 repeat 속성을 음미해 봅시다.

See the Pen 기본 CSS GRID 만들어 보기 - fr unit / repeat by CHANWHE KIM (@CHANWHE_KIM) on CodePen.

GRID ITEM 배치하기 CSS GRID를 이용하면, 더 적은 코드로 그리고 매우 매우 쉽게 각 요소들을 배치할 수 있습니다! 아래와 같은 그림을 CSS GRID를 이용하지 않고, 구현하려고 한다면 손이 많이 가는 작업이 될거라 생각합니다. 하기의 레이아웃은 1번, 5번 그리고 6번의 자식요소를 'grid-row'와 'grid-column' 속성을 이용해 이동 시켰습니다. - 1번 요소를 2줄과 3줄의 row로 이동시키고자 한다면, 'grid-row : 2 / 3'으로 속성을 지정해 줍니다. - 마찬가지로, 1번 요소를 2열과 3열의 column으로 이동시키고자 한다면, 'grid-column : 2 / 3'으로 속성을 지정해 줍니다. - 다른 자식 요소들도 위와 같은 방법으로 원하는대로 배치할 수 있습니다. 아래의 코드펜의 예시를 통해 grid를 가지고 놀아보세요!

See the Pen CSS GRID ITEM 배치하기 by CHANWHE KIM (@CHANWHE_KIM) on CodePen.

GRID ITEM 범위 지정 위의 'grid-row' 또는 'grid-column' 속성을 이용해, 개별 아이템의 크기를 지정할 수 있습니다. 해당 속성을 지정할 때 span을 사용할 수도 있습니다. 만약 2번 요소에 'grid-column : 1 / span 3' 으로 속성을 지정하면 위의 사진과 같이 3번까지 해당 요소가 늘어납니다. 추가로, span을 지정하지 않고 공간의 끝까지 요소를 확장하고 싶을 때는 'grid-column : 1 / -1'과 같이 지정할 수도 있습니다.

See the Pen CSS GRID ITEM 범위 지정 by CHANWHE KIM (@CHANWHE_KIM) on CodePen.

Handmade with .