Grid System

그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다.

1970년대 중반부터 본격적으로 사용된 그리드 시스템은 디자인의 레이아웃에 규칙을 부여하는 수단입니다.

편집디자인(인쇄물)에서 시작해 현재 웹 개발 분야에도 적용하여 웹 페이지를 제작하는 기초 단계에서 그리드 시스템을 사용하면 제작을 쉽고 빠르게 진행할 수 있습니다.

장점

디자인 레이아웃은 모든 측정값이 동일한 규칙을 따르면 자동으로보다 일관된 UI를 얻게 됩니다. 그리드 시스템은 균일한 요소와 간격을 사용하여 플랫폼, 환경 및 화면 크기에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 도와줍니다. 또한 협업의 목적으로 내부의 기준을 정하는 것에 도움이 되며, 또한 반응형 디자인의 경우 해상도 대응이 쉬워지고 디자이너와 개발자 사이의 쉬운 커뮤니케이션 시스템이 됩니다.

웹디자인에서의 그리드 시스템

그리드 시스템의 기본 요소:

칼럼(Column)
거터(Gutter)
마진(Margin)

세 가지 요소로 구성됩니다.

Material Design에서의 그리드 시스템

Google의 Material Design는 공식적으로 CSS 프레임워크를 제공하지 않지만, 가이드라인에서 "Layout Grid"라는 이름으로 그리드 시스템을 정의합니다.

특징:

8px 단위의 간격(gutter)과 여백(margin).
12단 열 시스템 권장.
반응형 브레이크포인트(모바일, 태블릿, 데스크톱).

Material Design의 그리드 시스템은 Bootstrap과 유사하지만, 시각적 스타일(그림자, 색상, 간격)에 더 초점을 맞춥니다.

Container, Row, Col이라는 이름은 Bootstrap에서 영감을 받아 널리 사용되는 용어로, 커뮤니티에서 자연스럽게 표준처럼 굳어졌습니다.

CSS 구현 방법: 샘플

Container: 콘텐츠를 중앙에 정렬하고, 최대 너비(max-width)를 설정하며, 좌우 패딩을 추가합니다.
Row: 가로로 요소를 배치하는 컨테이너로, Flexbox를 사용하여 열(Col)을 수평으로 정렬합니다.
Col: Row 안에 포함된 열로, 너비를 비율(예: 12단 그리드 시스템)로 설정하거나 고정 크기로 정의합니다.

HTML 구조:

<div class="container">
  <div class="row">
    <div class="col col-4">Column 1</div>
    <div class="col col-4">Column 2</div>
    <div class="col col-4">Column 3</div>
  </div>
  <div class="row">
    <div class="col col-6">Column 1</div>
    <div class="col col-6">Column 2</div>
  </div>
</div>

CSS 코드:

/* Container */
.container {
  max-width: 1200px; /* Material Design의 일반적인 최대 너비 */
  margin: 0 auto; /* 중앙 정렬 */
  padding: 16px; /* 좌우 패딩 (Material Design의 기본 간격 단위: 8px의 배수) */
}

/* Row */
.row {
  display: flex; /* Flexbox로 가로 배치 */
  flex-wrap: wrap; /* 화면 크기에 따라 줄바꿈 허용 */
  margin: 0 -8px; /* 열 사이의 간격을 위한 네거티브 마진 */
}

/* Column */
.col {
  padding: 8px; /* 열 내부 패딩 */
  box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
}

/* 12단 그리드 시스템 기반 열 너비 */
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* 반응형 디자인을 위한 미디어 쿼리 */
@media (max-width: 600px) {
  .col-4, .col-6, .col-12 {
    flex: 0 0 100%; /* 작은 화면에서는 열이 100% 너비로 */
    max-width: 100%;
  }
}

/* Material Design 스타일 추가 */
.col {
  background-color: #fff; /* 기본 배경색 */
  border-radius: 4px; /* 둥근 모서리 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

Breakpoint 구현 방법

Breakpoint는 반응형 웹 디자인(Responsive Web Design)에서 사용되는 개념으로, 화면 크기(주로 너비)에 따라 레이아웃이나 스타일을 변경해야 하는 특정 지점을 의미합니다. 이는 사용자가 데스크톱, 태블릿, 모바일 등 다양한 기기에서 웹사이트를 볼 때 최적의 경험을 제공하기 위해 필요합니다.

예시: 화면 너비가 600px 이하일 때 열(Column)이 수평 대신 수직으로 쌓이도록 스타일을 변경.
용도: 주로 CSS의 미디어 쿼리(Media Query)를 사용해 구현하며, Material Design와 같은 가이드라인에서도 권장되는 브레이크포인트를 따를 수 있습니다.

Material Design에서는 기기별로 다음과 같은 브레이크포인트를 제안합니다:

모바일: 0px ~ 599px
태블릿: 600px ~ 959px
데스크톱: 960px 이상

만약 Breakpoint 가 필요하다면 다음과 같이 구현하면 된다:

/* Breakpoint: 모바일 (600px 이하) */
@media (max-width: 600px) {
  .col-4 {
    flex: 0 0 100%; /* 열이 풀 너비로 */
    max-width: 100%;
  }
}

/* Breakpoint: 태블릿 (600px ~ 959px) */
@media (min-width: 601px) and (max-width: 959px) {
  .col-4 {
    flex: 0 0 50%; /* 열이 2개씩 배치 */
    max-width: 50%;
  }
}

/* Breakpoint: 데스크톱 (960px 이상) */
@media (min-width: 960px) {
  .col-4 {
    flex: 0 0 33.3333%; /* 기본 3열 유지 */
    max-width: 33.3333%;
  }
}

Favorite site

그리드 시스템 - 리메인커리어 | 리메인