Grid 그리드

원문 보기 위키 갱신 2026.10.11

24 그리드 시스템이에요.

출처: 문서

본문

언제 사용하나요

플렉스 레이아웃이 필요하고, 서로 다른 화면에 맞춰야(반응형) 할 때 grid 컴포넌트를 사용해요.

기본 사용법

기본 그리드예요.

:::demo Row와 Col 컴포넌트로 기본 그리드 시스템을 만들 수 있고, Col은 반드시 Row 안에 넣어야 해요.

<template>
  <d-row class="docs-devui-row">
    <d-col :span="12">col-12</d-col>
    <d-col :span="12">col-12</d-col>
  </d-row>
  <d-row class="docs-devui-row">
    <d-col :span="8">col-8</d-col>
    <d-col :span="8">col-8</d-col>
    <d-col :span="8">col-8</d-col>
  </d-row>
  <d-row class="docs-devui-row">
    <d-col :span="6">col-6</d-col>
    <d-col :span="6">col-6</d-col>
    <d-col :span="6">col-6</d-col>
    <d-col :span="6">col-6</d-col>
  </d-row>
  <d-row class="docs-devui-row">
    <d-col :span="4">col-4</d-col>
    <d-col :span="4">col-4</d-col>
    <d-col :span="4">col-4</d-col>
    <d-col :span="4">col-4</d-col>
    <d-col :span="4">col-4</d-col>
    <d-col :span="4">col-4</d-col>
  </d-row>
</template>

<style>
.docs-devui-row:not(:last-of-type) {
  margin-bottom: 20px;
}
.docs-devui-row .devui-col {
  text-align: center;
  min-height: 44px;
  line-height: 44px;
}
.docs-devui-row .devui-col:nth-of-type(2n + 1) {
  background: var(--devui-global-bg);
}
.docs-devui-row .devui-col:nth-of-type(2n) {
  background: var(--devui-brand);
}
</style>

:::

정렬

세로 정렬과 가로 정렬이에요.

:::demo Row의 align 속성과 justify 속성으로 자식 요소를 세로·가로 정렬해요.

<template>
  <p>Align top</p>
  <d-row align="top" class="docs-devui-row">
    <d-col :span="6" class="col-child">col-6</d-col>
    <d-col :span="6" class="col-child">col-6</d-col>
    <d-col :span="6" class="col-child">col-6</d-col>
    <d-col :span="6" class="col-child">col-6</d-col>
  </d-row>
  <p>Align middle</p>
  <d-row align="middle" class="docs-devui-row">
    <d-col :span="6" class="col-child">col-6</d-col>
    <d-col :span="6" class="col-child">col-6</d-col>
    <d-col :span="6" class="col-child">col-6</d-col>
    <d-col :span="6" class="col-child">col-6</d-col>
  </d-row>
  <p>Align bottom</p>
  <d-row align="bottom" class="docs-devui-row">
    <d-col :span="6" class="col-child">col-6</d-col>
    <d-col :span="6" class="col-child">col-6</d-col>
    <d-col :span="6" class="col-child">col-6</d-col>
    <d-col :span="6" class="col-child">col-6</d-col>
  </d-row>
  <p>Justify start</p>
  <d-row justify="start" class="docs-devui-row">
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
  </d-row>
  <p>Justify center</p>
  <d-row justify="center" class="docs-devui-row">
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
  </d-row>
  <p>Justify end</p>
  <d-row justify="end" class="docs-devui-row">
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
  </d-row>
  <p>Justify between</p>
  <d-row justify="between" class="docs-devui-row">
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
  </d-row>
  <p>Justify around</p>
  <d-row justify="around" class="docs-devui-row">
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
    <d-col :span="4" class="col-child">col-4</d-col>
  </d-row>
</template>

:::

자식 요소 사이 간격

그리드 사이 간격은 Row의 gutter 속성으로 조절해요.

:::demo :gutter="10"이면 자식 요소의 좌우 간격이 5px가 돼요. :gutter="[10, 20]"이면 좌우 간격은 5px, 위아래 간격은 10px예요. 화면 너비에 맞춰야 한다면 :gutter="{ xs: 10, sm: 20, md: [20, 10], lg: [30, 20], xl: [40, 30], xxl: [50, 40] }"처럼 쓸 수 있어요.

<template>
  <d-row :gutter="10" class="docs-devui-row">
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
  </d-row>
  <d-row :gutter="[10, 20]" class="docs-devui-row">
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
  </d-row>
  <d-row :gutter="{ xs: 10, sm: 20, md: [20, 10], lg: [30, 20], xl: [40, 30], xxl: [50, 40] }" class="docs-devui-row">
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
    <d-col :span="6" class="col-gutter">
      <div class="col-child">col-6</div>
    </d-col>
  </d-row>
</template>

<style>
.col-gutter {
  height: auto;
  background: transparent !important;
}
.col-gutter:nth-of-type(2n + 1) > .col-child {
  background: var(--devui-global-bg);
}
.col-gutter:nth-of-type(2n) > .col-child {
  background: var(--devui-brand);
}
</style>

:::

flex 채우기

Col의 flex 속성으로 flex 채우기를 지원해요.

:::demo

<template>
  <d-row type="flex" class="docs-devui-row">
    <d-col :flex="2">2 / 5</d-col>
    <d-col :flex="3">3 / 5</d-col>
  </d-row>
  <d-row type="flex" class="docs-devui-row">
    <d-col flex="100px">100px</d-col>
    <d-col flex="auto">auto</d-col>
  </d-row>
  <d-row type="flex" class="docs-devui-row">
    <d-col flex="1 1 200px">1 1 200px</d-col>
    <d-col flex="0 1 300px">0 1 300px</d-col>
  </d-row>
</template>

:::

좌우 오프셋

Col의 offset, pull, push를 사용해 자식 요소를 좌우로 밀어낼 수 있어요.

:::demo 열 오프셋이에요. offset을 사용하면 열을 오른쪽으로 밀 수 있어요. 예컨대 offset={4}는 요소를 4개 열(column) 너비만큼 오른쪽으로 밀어요. offset, pull, push는 중첩해서도 쓸 수 있어요.

<template>
  <d-row class="docs-devui-row">
    <d-col :span="8">col-8</d-col>
    <d-col :span="8" :offset="8">col-8</d-col>
  </d-row>
  <d-row class="docs-devui-row">
    <d-col :span="6" :offset="6">col-6 col-offset-6</d-col>
    <d-col :span="6" :offset="6">col-6 col-offset-6</d-col>
  </d-row>
  <d-row class="docs-devui-row">
    <d-col :span="12" :offset="6" :md="{ span: 22, offset: 1 }">col-12 col-offset-6</d-col>
  </d-row>
</template>

:::

반응형 레이아웃

여섯 가지 반응형 크기(xs sm md lg xl xxl)를 미리 제공해요.

:::demo Bootstrap의 반응형 디자인을 참고했어요.

<template>
  <d-row class="docs-devui-row">
    <d-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</d-col>
    <d-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</d-col>
    <d-col :xs="2">Col</d-col>
  </d-row>
  <d-row wrap class="docs-devui-row">
    <d-col :xs="0" :sm="4" :md="6" :lg="8" :xl="10">Col</d-col>
    <d-col :xs="24" :sm="16" :md="12" :lg="8" :xl="4">Col</d-col>
    <d-col :xs="0" :sm="4" :md="6" :lg="8">Col</d-col>
  </d-row>
</template>

:::

그리드 정렬(순서)

열 정렬이에요. order, push, pull 클래스를 사용하면 열(column)의 순서를 바꿀 수 있어요.

:::demo Bootstrap의 반응형 디자인을 참고했어요.

<template>
  <d-row class="docs-devui-row">
    <d-col :span="18" :order="2">col-18 order-2</d-col>
    <d-col :span="6" :order="1">col-6 order-1</d-col>
  </d-row>
  <d-row class="docs-devui-row">
    <d-col :span="18" :push="6">col-18 col-push-6</d-col>
    <d-col :span="6" :pull="18">col-6 col-pull-18</d-col>
  </d-row>
</template>

:::

Row 파라미터

파라미터	타입	기본값	설명	Demo 링크
align	Align	'top'	flex 레이아웃에서의 수직 정렬 방식	세로 정렬
justify	Justify	'start'	flex 레이아웃에서의 수직 정렬 방식	세로 정렬
gutter	`number`\|`array`\|`object`	0	그리드 간격. 숫자 형식: 가로 간격. 객체 형식은 반응형 지원: { xs: 8, sm: 16, md: 24}. 배열 형식: [가로 간격, 세로 간격]	자식 요소 간격
wrap	`boolean`	false	자동 줄바꿈 여부
no-outer	`boolean`	true	자식 요소 padding이 전체 레이아웃 바깥에 만드는 여백 제거 여부 설정

Col 파라미터

파라미터	타입	기본값	설명	Demo 링크
span	`number`	-	그리드 점유 칸 수. 0이면 display: none과 동일	기본 사용법
flex	`string\|number`	-	flex 레이아웃 채우기	flex 채우기
offset	`number`	-	그리드 왼쪽 간격 칸 수. 간격 안에는 그리드 불가	좌우 오프셋
pull	`number`	-	그리드를 왼쪽으로 이동할 칸 수	좌우 오프셋, 그리드 정렬
push	`number`	-	그리드를 오른쪽으로 이동할 칸 수	좌우 오프셋, 그리드 정렬
order	`number`	-	그리드 순서. flex 레이아웃 모드에서 유효	그리드 정렬
xs	`number\|object`	-	<576px 반응형 그리드. 그리드 수 또는 다른 속성을 담은 객체	그리드 정렬
sm	`number\|object`	-	>=576px 반응형 그리드. 그리드 수 또는 다른 속성을 담은 객체	반응형 레이아웃
md	`number\|object`	-	>=768px 반응형 그리드. 그리드 수 또는 다른 속성을 담은 객체	반응형 레이아웃
lg	`number\|object`	-	>=992px 반응형 그리드. 그리드 수 또는 다른 속성을 담은 객체	반응형 레이아웃
xl	`number\|object`	-	>=1200px 반응형 그리드. 그리드 수 또는 다른 속성을 담은 객체	반응형 레이아웃
xxl	`number\|object`	-	>=1600px 반응형 그리드. 그리드 수 또는 다른 속성을 담은 객체	반응형 레이아웃

Grid 타입 정의

Align

type Align = 'top' | 'middle' | 'bottom';

Justify

type Justify = 'start' | 'end' | 'center' | 'around' | 'between';

더 알아보기 (Learn more)

Row와 Col의 24칸 시스템으로 기본 레이아웃부터 gutter 간격, flex 채우기, offset/push/pull 오프셋, xs~xxl 반응형, order 정렬까지 하나의 시스템으로 해결할 수 있어요.