1111111 | 공지사항《고객센터 | Mong9 Editor: WYSIWYG HTML Editor with beautiful Block

그리드

Grid

컨텐츠영역을 분할하는 최상위 클래스로써 column으로 영역을 구분합니다.
grid와 column은 항상 함께 사용되어야 하며, column이 두개 이상일때 첫 column과 마지막 column에는
column-first와 column-last 클래스가 사용되어야 합니다.

grid-1

결과

column-1

코드

<div class="grid-1"> 
    <div class="column-1">
        <div>column-1</div>
    </div>  
</div>

grid-2

결과

column-1

코드

<div class="grid-2"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-2

코드

<div class="grid-2"> 
    <div class="column-2">
        <div>column-2</div>
    </div> 
</div>

grid-3

결과

column-1

코드

<div class="grid-3"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-2

column-1

코드

<div class="grid-3"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

코드

<div class="grid-3"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

grid-4

결과

column-1

코드

<div class="grid-4"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-2

column-1

코드

<div class="grid-4"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

column-1

코드

<div class="grid-4"> 
    <div class="column-1 column-first">
        <div>column-2</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

코드

<div class="grid-4"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-3

코드

<div class="grid-4"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-3 column-last">
        <div>column-3</div>
    </div>  
</div>

결과

column-2

코드

<div class="grid-4"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-3

column-1

코드

<div class="grid-4"> 
    <div class="column-3 column-first">
        <div>column-3</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-4

코드

<div class="grid-4"> 
    <div class="column-4">
        <div>column-4</div>
    </div>  
</div>

grid-5

결과

column-1

코드

<div class="grid-4"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-2

column-1

코드

<div class="grid-5"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

column-1

코드

<div class="grid-5"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

column-1

코드

<div class="grid-5"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

코드

<div class="grid-5"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-2

column-1

코드

<div class="grid-5"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-2

column-1

column-2

코드

<div class="grid-5"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-1

column-2

코드

<div class="grid-5"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-3

column-1

코드

<div class="grid-5"> 
    <div class="column-3 column-first">
        <div>column-3</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-3

column-1

코드

<div class="grid-5"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-3">
        <div>column-3</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-3

코드

<div class="grid-5"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-3 column-last">
        <div>column-3</div>
    </div>  
</div>

결과

column-3

column-2

코드

<div class="grid-5"> 
    <div class="column-3 column-first">
        <div>column-3</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-2

column-3

코드

<div class="grid-5"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-3 column-last">
        <div>column-3</div>
    </div>  
</div>

결과

column-1

column-4

코드

<div class="grid-5"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-4 column-last">
        <div>column-4</div>
    </div>  
</div>

결과

column-4

column-1

코드

<div class="grid-5"> 
    <div class="column-4 column-first">
        <div>column-4</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-5

코드

<div class="grid-5"> 
    <div class="column-5">
        <div>column-5</div>
    </div>
</div>

grid-6

결과

column-1

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-2

column-1

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

column-1

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

column-1

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>  
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

column-1

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-2

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-3

column-1

코드

<div class="grid-6"> 
    <div class="column-3 column-first">
        <div>column-3</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-3

column-1

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-3">
        <div>column-3</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-3

column-1

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-3">
        <div>column-3</div>
    </div>  
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-3

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-3 column-last">
        <div>column-3</div>
    </div>  
</div>

결과

column-2

column-1

코드

<div class="grid-6"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-2

column-1

column-2

column-1

코드

<div class="grid-6"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>  
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-2

column-1

column-2

코드

<div class="grid-6"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>  
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-1

column-4

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-4 column-last">
        <div>column-4</div>
    </div>  
</div>

결과

column-1

column-4

column-1

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-4">
        <div>column-4</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-4

column-1

코드

<div class="grid-6"> 
    <div class="column-4 column-first">
        <div>column-4</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-2

코드

<div class="grid-6"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-1

column-2

column-3

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-3 column-last">
        <div>column-3</div>
    </div>  
</div>

결과

column-1

column-3

column-2

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-3">
        <div>column-3</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-2

column-1

column-3

코드

<div class="grid-6"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-3 column-last">
        <div>column-3</div>
    </div>  
</div>

결과

column-2

column-3

column-1

코드

<div class="grid-6"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div>
    <div class="column-3">
        <div>column-3</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-3

column-1

column-2

코드

<div class="grid-6"> 
    <div class="column-3 column-first">
        <div>column-3</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-3

column-2

column-1

코드

<div class="grid-6"> 
    <div class="column-3 column-first">
        <div>column-3</div>
    </div>
    <div class="column-2">
        <div>column-2</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-4

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-4 column-last">
        <div>column-4</div>
    </div>  
</div>

결과

column-1

column-4

column-1

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-4">
        <div>column-4</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-4

column-1

코드

<div class="grid-6"> 
    <div class="column-4 column-first">
        <div>column-4</div>
    </div>
    <div class="column-1">
        <div>column-1</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-5

column-1

코드

<div class="grid-6"> 
    <div class="column-5 column-first">
        <div>column-5</div>
    </div>
    <div class="column-1 column-last">
        <div>column-1</div>
    </div>  
</div>

결과

column-1

column-5

코드

<div class="grid-6"> 
    <div class="column-1 column-first">
        <div>column-1</div>
    </div>
    <div class="column-5 column-last">
        <div>column-5</div>
    </div>  
</div>

결과

column-2

column-4

코드

<div class="grid-6"> 
    <div class="column-2 column-first">
        <div>column-2</div>
    </div> 
    <div class="column-4 column-last">
        <div>column-4</div>
    </div>  
</div>

결과

column-4

column-2

코드

<div class="grid-6"> 
    <div class="column-4 column-first">
        <div>column-4</div>
    </div> 
    <div class="column-2 column-last">
        <div>column-2</div>
    </div>  
</div>

결과

column-3

코드

<div class="grid-6"> 
    <div class="column-3 column-first">
        <div>column-3</div>
    </div> 
    <div class="column-3 column-last">
        <div>column-3</div>
    </div>  
</div>

결과

column-6

코드

<div class="grid-6"> 
    <div class="column-6">
        <div>column-6</div>
    </div>  
</div>

1111111 상세보기

그리드

grid-1

grid-2

grid-3

grid-4

grid-5

grid-6