그리드 레이아웃
mdui는 모바일 우선의 반응형 12열 그리드 레이아웃 시스템을 제공합니다.
레이아웃 컨테이너
mdui는 페이지 콘텐츠와 그리드 레이아웃 시스템을 감싸기 위해 .mdui-container 컨테이너가 필요합니다. 이를 위해 두 가지 클래스를 제공합니다.
.mdui-container 클래스는 화면 너비의 92% - 96%를 차지하며 최대 너비는 1280px입니다.
<body>
<div class="mdui-container">
...
</div>
</body>.mdui-container-fluid 클래스는 항상 화면 너비의 100%를 차지합니다.
<body>
<div class="mdui-container-fluid">
...
</div>
</body>기본 그리드
.mdui-row는 적절한 정렬(alignment)과 패딩(padding)을 부여받기 위해 반드시 .mdui-container 또는 .mdui-container-fluid 내에 포함되어야 합니다.
.mdui-row 내에는 여러 개의 .mdui-col-xs-[1-12] 클래스를 포함하며, .mdui-col-xs-[1-12]의 숫자는 해당 요소가 차지하는 열의 수를 나타냅니다.
한 행의 열 합계가 12를 초과하면 초과된 열은 다음 줄로 넘어갑니다.
<div class="mdui-row">
<div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>
반응형 그리드
.mdui-col-xs-[1-12]휴대폰, 컴퓨터 등 모든 화면 기기에 적용됩니다..mdui-col-sm-[1-12]태블릿과 같은 작은 화면 이상의 기기에 적용됩니다..mdui-col-md-[1-12]노트북과 같은 중간 화면 이상의 기기에 적용됩니다..mdui-col-lg-[1-12]데스크톱 컴퓨터와 같은 큰 화면 이상의 기기에 적용됩니다..mdui-col-xl-[1-12]TV와 같은 초대형 화면 기기에 적용됩니다.
이 클래스들을 혼합하여 사용하여 반응형 효과를 낼 수 있습니다.
반응형 브레이크포인트는 다음과 같습니다:
| class | 구간 | 거터(Gutter) 너비 |
|---|---|---|
.mdui-col-xs-[1-12] | > 0px | 16px (각 열의 좌우에 8px씩) |
.mdui-col-sm-[1-12] | > 600px | |
.mdui-col-md-[1-12] | > 1024px | |
.mdui-col-lg-[1-12] | > 1440px | |
.mdui-col-xl-[1-12] | > 1920px |
<!-- 초소형 화면 기기에서는 첫 번째 열이 100% 너비, 두 번째 열이 50% 너비입니다. 작은 화면 이상의 기기에서는 첫 번째 열이 66.6% 너비, 두 번째 열이 33.3% 너비가 됩니다. -->
<div class="mdui-row">
<div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- 초소형 화면 기기에서는 각 열이 50% 너비이고, 작은 화면 이상의 기기에서는 각 열이 33.3% 너비입니다. -->
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- 모든 기기에서 각 열은 50% 너비입니다. -->
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div><div class="mdui-row mdui-row-gapless">
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>열 오프셋
.mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12], .mdui-col-offset-xl-[1-12]를 사용하여 열을 오른쪽으로 오프셋할 수 있습니다. 클래스 이름의 숫자는 오른쪽으로 오프셋할 열의 수를 나타냅니다.
<div class="mdui-row">
<div class="mdui-col-md-4">.mdui-col-md-4</div>
<div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div><div class="mdui-row">
<div class="mdui-col-xs-9">
Level 1: .col-xs-9
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
<div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
</div>
</div>
</div>등분할 열
.mdui-row-xs-[1-12] 내에 .mdui-col 클래스를 가진 여러 요소를 포함하면 해당 요소들은 등분할됩니다. 예를 들어, .mdui-row-xs-5 내부의 각 .mdui-col 요소는 20%의 너비를 차지합니다.
<div class="mdui-row-xs-5">
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
</div>.mdui-row-xs-[1-12], .mdui-row-sm-[1-12], .mdui-row-md-[1-12], .mdui-row-lg-[1-12], .mdui-row-xl-[1-12]를 혼합하여 반응형 레이아웃을 구현할 수 있습니다.