[많이쓰는 UI] 그리드 시스템 (Flexbox Grid)

그리드 시스템은 웹/태블릿/모바일 환경에서 동시에 잘 보일 수 있도록 하기 위해서 만들어진 시스템입니다. 웹 화면을 12개로 나누어서 웹페이지가 보여지는 기기의 너비에 따라서 어느정도의 영역을 차지하도록 할 것인지를 쉽게 나타낼 수 있습니다.

이렇게 말로만 해서는 확 이해가 되지 않기 때문에 예시를 들어보겠습니다.

웹에서는 12개 중에서 각각 3개씩 차지하는 상자가 있다고 가정하겠습니다.

태블릿에서는 6개를 차지하도록 하고,

모바일에서는 12개를 차지하도록 해서 기기에 맞춰 자동으로 변하는 반응형 화면을 작성할 수 있습니다.

그리드 시스템은 CSS로 어떻게 만드나요?

거의 대부분의 사람들이 직접 그리드를 만들지는 않는다고 생각합니다. 직접 만드는 경우에는 기존에 오픈소스로 제공되고있는 그리드 보다 버그가 많을 수 밖에 없기 때문입니다. 잘 만든다고 하더라도, 기존의 오픈소스정도의 품질이겠죠?

그래서 저는 그리드를 오픈소스에서 다운받아서 사용을 하고 있습니다. 요즘은 모든 브라우저가 flex 속성을 지원하기 때문에 flex 기반의 품질 높은 그리드를 사용할 수 있습니다.

Sass Flexbox Grid

Flexbox Grid 는 어떻게 사용하나요?

Flexbox Grid가 아니더라도, 모든 그리드에서는 한 줄을 의미하는 row와 12개로 나눈 영역중 하나를 의미하는 col이 있습니다.

우선 한 줄을 먼저 작성합니다.

<div class="row"></div>

그리고 이어서 6개의 div 태그를 집어넣습니다. col-xs는 모바일 화면, col-sm은 태블릿 화면, col-md는 웹 화면이라고 생각하시면 될 것 같습니다.

뒤에 오는 숫자는 12개의 영역을 기준으로 얼마나 차지할 것인지를 나타냅니다.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4"></div>
  <div class="col-xs-12 col-sm-6 col-md-4"></div>
  <div class="col-xs-12 col-sm-6 col-md-4"></div>
  <div class="col-xs-12 col-sm-6 col-md-4"></div>
  <div class="col-xs-12 col-sm-6 col-md-4"></div>
  <div class="col-xs-12 col-sm-6 col-md-4"></div>
</div>

col-md-4 (웹)

col-sm-6 (태블릿)

col-xs-12 (모바일)