본문 영역
그리드(grid)
그리드(grid)는 영역을 분할하는 클래스입니다. grid는 행을 의미, coulmn은 열을 의미하며, 항상 grid 안에 column이 위치해야합니다.
몽9 에디터 그리드 시스템은 기기나 뷰포트가 증가함에 따라 최대 6개 열이 적절하게 조절되는 반응형 그리드 시스템을 제공합니다.
미리 정해진 클래스들로 손쉽게 반응형 레이아웃을 설정할 수 있습니다.
몽9 에디터 그리드 시스템은 기기나 뷰포트가 증가함에 따라 최대 6개 열이 적절하게 조절되는 반응형 그리드 시스템을 제공합니다.
미리 정해진 클래스들로 손쉽게 반응형 레이아웃을 설정할 수 있습니다.
소개
- 몽9 에디터에서 모든 블록의 기본 구조는 .m9-grid-block > .m9-grid-n > .m9-column-n 구조로 사용됩니다.
m9-grid-n와.m9-column-n은 항상 함께 사용되어야 합니다.
예를 들어 열을 4개로 나눈다면 m9-grid-4로 사용할 수 있습니다. (아래에는 다양한 column의 경우의 수를 설명합니다)- column이 두개 이상일때 첫 번째 column 에는
m9-column-first가 필요하며 마지막 column에는m9-column-last클래스가
사용되어야 합니다. - 열의 간격은
m9-spacing-n클래스로 조정할 수 있으며,m9-grid-n에 삽입되어 0부터 3까지 조정 가능합니다. - 그리드 구조를 임의로 수정할 시 블록이 깨질 수 있습니다.
- 에디터를 사용한다면 자동으로 그리드가 생성됩니다.
m9-grid-1
결과
m9-column-1
코드
m9-grid-2
결과
m9-column-1
m9-column-1
코드
결과
m9-column-2
코드
m9-grid-3
결과
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-2
코드
m9-grid-4
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-2
코드
결과
m9-column-1
m9-column-3
코드
결과
m9-column-2
m9-column-2
코드
결과
m9-column-3
m9-column-1
코드
결과
m9-column-4
코드
m9-grid-5
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-2
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-2
코드
결과
m9-column-2
m9-column-2
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-2
코드
결과
m9-column-1
m9-column-2
m9-column-2
코드
결과
m9-column-3
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-3
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-3
코드
결과
m9-column-3
m9-column-2
코드
결과
m9-column-2
m9-column-3
코드
결과
m9-column-1
m9-column-4
코드
결과
m9-column-4
m9-column-1
코드
결과
m9-column-5
코드
m9-grid-6
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-2
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-2
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-1
m9-column-2
코드
결과
m9-column-3
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-3
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-3
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-3
코드
결과
m9-column-2
m9-column-2
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-2
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-1
m9-column-2
코드
결과
m9-column-1
m9-column-1
m9-column-4
코드
결과
m9-column-1
m9-column-4
m9-column-1
코드
결과
m9-column-4
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-2
m9-column-2
코드
결과
m9-column-1
m9-column-2
m9-column-3
코드
결과
m9-column-1
m9-column-3
m9-column-2
코드
결과
m9-column-2
m9-column-1
m9-column-3
코드
결과
m9-column-2
m9-column-3
m9-column-1
코드
결과
m9-column-3
m9-column-1
m9-column-2
코드
결과
m9-column-3
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-4
코드
결과
m9-column-1
m9-column-4
m9-column-1
코드
결과
m9-column-4
m9-column-1
m9-column-1
코드
결과
m9-column-5
m9-column-1
코드
결과
m9-column-1
m9-column-5
코드
결과
m9-column-2
m9-column-4
코드
결과
m9-column-4
m9-column-2
코드
결과
m9-column-3
m9-column-3
코드
결과
m9-column-6
