머티리얼 디자인 라이트-그리드

MDL (Material Design Lite) 그리드는 다양한 화면 크기에 맞게 콘텐츠를 레이아웃하기위한 구성 요소입니다. MDL 그리드는 컨테이너 / div 요소로 정의되고 포함됩니다. 그리드에는 데스크톱 크기 화면에 12 개 열, 태블릿 크기 화면에 8 개 열, 전화기 크기 화면에 4 개 열이 있으며 각 크기에는 미리 정의 된 여백과 거터가 있습니다. 셀은 다음과 같은 예외를 제외하고 정의 된 순서대로 행에 순차적으로 배치됩니다.

그리드 셀이 화면 크기 중 하나의 행에 맞지 않으면 다음 행으로 흐릅니다.
그리드 셀에 지정된 열 크기가 화면 크기에 대한 열 수보다 크거나 같으면 전체 행을 차지합니다.

MDL은 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 그리드에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.

Sr. 아니.	클래스 이름 및 설명
1	mdl-layout 컨테이너를 MDL 구성 요소로 식별합니다. 외부 컨테이너 요소에 필요합니다.
2	mdl-grid 컨테이너를 MDL 그리드 구성 요소로 식별합니다. "외부"div 요소에 필요합니다.
삼	mdl-cell 컨테이너를 MDL 셀로 식별합니다. "내부"div 요소에 필요합니다.
4	mdl-grid--no-spacing 그리드 셀 사이에 여백이 없도록 업데이트합니다. 그리드 컨테이너의 경우 선택 사항입니다.
5	mdl-cell--N-col 이렇게하면 셀의 열 크기를 N, N은 1-12 포함, 기본값은 4로 설정하는 데 도움이됩니다. "내부"div 요소의 경우 선택 사항입니다.
6	mdl-cell--N-col-desktop 이렇게하면 데스크톱 모드에서만 셀의 열 크기를 N으로 설정하는 데 도움이됩니다. N은 1-12입니다. "내부"div 요소의 경우 선택 사항입니다.
7	mdl-cell--N-col-tablet 이는 태블릿 모드에서만 셀의 열 크기를 N으로 설정하는 데 도움이됩니다. N은 1-8입니다. "내부"div 요소의 경우 선택 사항입니다.
8	mdl-cell--N-col-phone 이것은 전화 모드에서만 셀의 열 크기를 N으로 설정하는 데 도움이됩니다. N은 1-4 포함입니다. "내부"div 요소의 경우 선택 사항입니다.
9	mdl-cell--hide-desktop 데스크탑 모드에서 셀을 숨 깁니다. "내부"div 요소의 경우 선택 사항입니다.
10	mdl-cell--hide-tablet 태블릿 모드에서는 셀을 숨 깁니다. "내부"div 요소의 경우 선택 사항입니다.
11	mdl-cell--hide-phone 전화 모드에서 셀을 숨 깁니다. "내부"div 요소의 경우 선택 사항입니다.
12	mdl-cell--stretch 셀을 세로로 늘여 부모를 채 웁니다 (기본값). "내부"div 요소의 경우 선택 사항입니다.
13	mdl-cell--top 부모의 맨 위에 셀을 정렬합니다. "내부"div 요소의 경우 선택 사항입니다.
14	mdl-cell--middle 셀을 부모의 가운데에 맞 춥니 다. "내부"div 요소의 경우 선택 사항입니다.
15	mdl-cell--bottom 셀을 부모의 맨 아래에 맞 춥니 다. "내부"div 요소의 경우 선택 사항입니다.

예

다음 예제는 다양한 화면에 콘텐츠를 레이아웃하기위한 mdl-grid 클래스 사용을 이해하는 데 도움이됩니다.

아래에 주어진 MDL 클래스가이 예제에서 사용됩니다.

mdl-layout − div를 MDL 구성 요소로 식별합니다.
mdl-js-layout − 외부 div에 기본 MDL 동작을 추가합니다.
mdl-layout--fixed-header − 작은 화면에서도 헤더를 항상 표시합니다.
mdl-layout__header-row − 컨테이너를 MDL 헤더 행으로 식별합니다.
mdl-layout__drawer − div를 MDL 레이아웃 서랍으로 식별합니다.
mdl-layout-title − 레이아웃 제목 텍스트를 식별합니다.
mdl-navigation − div를 MDL 탐색 그룹으로 식별합니다.
mdl-navigation__link − 앵커를 MDL 탐색 링크로 식별합니다.
mdl-layout__content − div를 MDL 레이아웃 콘텐츠로 식별합니다.
mdl-grid − div를 MDL 그리드 구성 요소로 식별합니다.
mdl-cell − div를 MDL 셀로 식별합니다.
mdl-cell--1-col − 데스크톱 화면 크기에서 셀의 열 크기를 12 셀 중 1 셀로 설정합니다.
mdl-cell--2-col − 데스크톱 화면 크기의 12 셀 중 2 셀로 셀의 열 크기를 설정합니다.
mdl-cell--4-col − 데스크톱 화면 크기의 12 셀 중 4 셀 크기로 셀의 열 크기를 설정합니다.
mdl-cell--6-col − 데스크톱 화면 크기에서 셀의 열 크기를 12 셀 중 6 셀로 설정합니다.
mdl-cell--4-col-phone − 휴대폰 화면 크기에서 셀의 열 크기를 4 셀 중 4 셀로 설정합니다.
mdl-cell--6-col-tablet − 태블릿 화면 크기에서 셀의 열 크기를 8 셀 중 6 셀로 설정합니다.
mdl-cell--8-col-tablet − 태블릿 화면 크기에서 셀의 열 크기를 8 셀 중 8 셀로 설정합니다.

mdl_grid.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Grid</span>          
            </div>       
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>  
            </nav>
         </div>
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>
   
   </body>
</html>

결과

결과를 확인하십시오.