뒤로가기

Grap UI 그리드 레이아웃

이 문서는 UI 프레임워크 중 그리드 레이아웃에 관련된 내용을 다룹니다.

반응형을 기본적으로 지원합니다.
각 칼럼은 flex를 사용하여 만들었습니다.
오프셋을 지원하며 칼럼과 함께 사용할 수 있습니다.
칼럼은 {{row}} 클래스를 가지는 div 안에 있어야 합니다.
칼럼의 클래스 형식은 {{column}}-{{breakpoints}}-{{숫자}} 입니다.

사용 방법 및 수정 방법

scss/layout/_grid.scss 파일을 @import 하여 사용 및 수정할 수 있습니다.

변수 목록

$columns는 12를 기본값으로 가집니다. 한 칼럼의 크기는 최소 1, 최대 12입니다.
$gutter는 각 칼럼 사이의 간격입니다.
$class-row는 `row`에 해당하는 클래스 이름입니다.
$class-column은 `column`에 해당하는 클래스 이름입니다.
$class-offset은 `offset`에 해당하는 클래스 이름입니다.

칼럼 데모

기본적인 칼럼 사용 방법입니다.

column-xs-12

column-xs-1

column-xs-11

column-xs-2

column-xs-10

column-xs-3

column-xs-9

column-xs-4

column-xs-8

column-xs-5

column-xs-7

column-xs-6

column-xs-7

column-xs-5

column-xs-8

column-xs-4

column-xs-9

column-xs-3

column-xs-10

column-xs-2

column-xs-11

column-xs-1

소스코드


<div class="column-xs-12">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-11">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-2">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-10">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-3">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-9">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-4">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-8">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-5">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-7">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-7">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-5">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-8">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-4">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-9">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-3">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-10">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-2">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-11">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-1">
  <div class="item narrow text-white"></div>
</div>

칼럼 오프셋 데모

칼럼에 일정 간격의 오프셋을 추가할 수 있습니다. offset은 항상 column과 한 쌍이어야 합니다.

column-xs-12

column-xs-11 offset-xs-1

column-xs-10 offset-xs-2

column-xs-9 offset-xs-3

column-xs-8 offset-xs-4

column-xs-7 offset-xs-5

column-xs-6 offset-xs-6

column-xs-5 offset-xs-7

column-xs-4 offset-xs-8

column-xs-3 offset-xs-9

column-xs-2 offset-xs-10

column-xs-1 offset-xs-11

소스코드

          
<div class="column-xs-12">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-11 offset-xs-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-10 offset-xs-2">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-9 offset-xs-3">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-8 offset-xs-4">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-7 offset-xs-5">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 offset-xs-6">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-5 offset-xs-7">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-4 offset-xs-8">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-3 offset-xs-9">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-2 offset-xs-10">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-1 offset-xs-11">
  <div class="item narrow text-white"></div>
</div>

칼럼 오프셋의 리셋

offset-{{namespace}}-reset을 사용하여 칼럼에 추가된 오프셋을 무시할 수 있습니다.

column-xs-1 offset-xs-11 offset-sm-reset

column-xs-11 offset-xs-1 offset-sm-reset

column-xs-2 offset-xs-10 offset-sm-reset

column-xs-10 offset-xs-2 offset-sm-reset

column-xs-3 offset-xs-9 offset-md-reset

column-xs-9 offset-xs-3 offset-md-reset

column-xs-4 offset-xs-8 offset-md-reset

column-xs-8 offset-xs-4 offset-md-reset

column-xs-5 offset-xs-7 offset-lg-reset

column-xs-7 offset-xs-5 offset-lg-reset

column-xs-6 offset-xs-6 offset-lg-reset

소스코드

          
<div class="column-xs-12">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-1 offset-xs-11 offset-sm-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-11 offset-xs-1 offset-sm-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-2 offset-xs-10 offset-sm-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-10 offset-xs-2 offset-sm-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-3 offset-xs-9 offset-md-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-9 offset-xs-3 offset-md-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-4 offset-xs-8 offset-md-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-8 offset-xs-4 offset-md-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-5 offset-xs-7 offset-lg-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-7 offset-xs-5 offset-lg-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 offset-xs-6 offset-lg-reset">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 offset-xs-6 offset-lg-reset">
  <div class="item narrow text-white"></div>
</div>

네임스페이스를 이용한 반응형 레이아웃

한 div에 여러개의 칼럼 클래스를 추가하여 반응형 레이아웃을 작성할 수 있습니다.

column-xs-6 column-sm-4 column-md-3 column-lg-1

소스코드

          
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>
<div class="column-xs-6 column-sm-4 column-md-3 column-lg-1">
  <div class="item narrow text-white"></div>
</div>

질문 및 수정 요청

해당 페이지에 대한 문의 및 요청 사항은 https://github.com/partnerlabs/grap-ui-framework 의 issue에 남겨주세요.