CSS 그리드 레이아웃(그리드) 사용법에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS 그리드 레이아웃(그리드) 사용법에 대한 자세한 설명

不言

풀어 주다： 2018-11-14 15:10:52

원래의

4473명이 탐색했습니다.

웹페이지의 레이아웃은 다양하며, 적절한 레이아웃은 웹페이지를 더욱 아름답게 만들 수 있습니다. CSS 그리드 레이아웃을 사용하면 간단한 설명이 포함된 그리드 레이아웃을 사용하여 복잡한 열을 만들 수 있습니다. 이번 글에서는 간단한 예시를 바탕으로 CSS의 그리드 레이아웃을 소개합니다.

먼저 컨테이너 프레임워크를 살펴보겠습니다.

#(id名){
    display: grid;    
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);    
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

로그인 후 복사

또는

.(class名){
    display: grid;    
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);  
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

로그인 후 복사

인트라넷 그리드를 설정하는 방법도 있습니다.

#(id名){
    display: inline-grid;    
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);  
      grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

로그인 후 복사

또는

.(class名){
    display: inline-grid;     
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);  
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

로그인 후 복사

Grid Frame(프로젝트 프레임)

그리드 프레임이 되는 요소에 대해 다음 CSS를 지정합니다.

#(id名){
    grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;   
    grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
    }

로그인 후 복사

또는

.(class名){
   grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;   
    grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
    }

로그인 후 복사

또는

#(id名){
    grid-column-start: (列方向的网格的开始位置);    
        grid-column-end: (列方向的网格的结束位置);    
        grid-row-start: (行方向的网格的开始位置);    
        grid-row-end: (行方向的网格的结束位置);
        }

로그인 후 복사

또는

.(class名){
          grid-column-start: (列方向的网格的开始位置);    
          grid-column-end: (列方向的网格的结束位置);    
          grid-row-start: (行方向的网格的开始位置);    
          grid-row-end: (行方向的网格的结束位置);
        }

로그인 후 복사

설명 예

그리드 선을 사용하여 그리드의 시작 및 끝 위치를 지정합니다.

아래 코드의 경우 셀의 너비는 두 번째 그리드의 세로선부터 네 번째 그리드의 세로선까지입니다.

 grid-column: 2 / 4;

로그인 후 복사

코드 예제

다음 CSS, HTML 파일을 만듭니다.

SimpleGrid.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border:solid #ff6a00 1px;
}
.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 3 / 4;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}
.GridItem4 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #b0ff70;
}
.GridItem5 {
    grid-column: 1 / 2;    
    grid-row: 2 / 3;    
    background-color: #7ee68d;
}
.GridItem6 {
    grid-column: 2 / 3;    
    grid-row: 2 / 3;    
    background-color: #7ee6e2;
}
.GridItem7 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color:#95a7f5
    }
.GridItem8 {
    grid-column: 4 / 5;    
    grid-row: 2 / 3;    
    background-color: #d095f5;
}

로그인 후 복사

SimpleGrid.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGrid.css" />
  </head>
  <body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
    <div class="GridItem4">内容4</div>
    <div class="GridItem5">内容5</div>
    <div class="GridItem6">内容6</div>
    <div class="GridItem7">内容7</div>
    <div class="GridItem8">内容8</div>
  </div>
  </body>
  </html>

로그인 후 복사

지침:

아래 컨테이너의 CSS 설명은 4행 x 2행 그리드를 생성합니다.

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border:solid #ff6a00 1px;
}

로그인 후 복사

그리드의 각 요소에 대한 CSS는 (GridItem 1~GridItem 8)입니다. 각 그리드에 대한 그리드 셀을 정의합니다. 그리드의 각 셀에 대한 배경색을 변경합니다.

.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}

로그인 후 복사

결과 표시

위의 HTML 파일을 표시하려면 Firefox 브라우저를 사용하세요. 아래와 같은 효과가 표시됩니다. 2행 x 4열 그리드를 만들고 각 셀에 "item n" 문자열을 표시합니다. 또한, 셀의 배경색을 셀별로 설정할 수 있습니다.

CSS 그리드 레이아웃(그리드) 사용법에 대한 자세한 설명

마찬가지로 Google Chrome에도 동일한 파일이 표시됩니다. 아래와 같은 효과가 표시됩니다.

CSS 그리드 레이아웃(그리드) 사용법에 대한 자세한 설명

IE 브라우저에서는 그리드 표시가 완료되지 않고 표시가 축소됩니다.

모든 그리드에 셀이 없는 예

이전 예에서는 셀 내 모든 그리드에 대한 옵션이 있는 경우를 소개했지만, 모든 그리드에 항목이 하나라도 있으면 작동합니다. 다음은 그리드의 희소(이산) 셀의 예입니다.

Code

다음 CSS, HTML 파일을 만듭니다.

SimpleGridSparse.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border: solid #ff6a00 1px;    
    background-color:#E0E0E0;
}
.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

로그인 후 복사

SimpleGridSparse.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGridSparse.css" />
  </head>
  <body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>
  </body>
  </html>

로그인 후 복사

지침:

다음 코드를 사용하면 그리드의 외부 프레임은 2행 × 4열의 그리드입니다.

 display: grid;  
 grid-template-columns: 160px 160px 160px 160px;  
 grid-template-rows: 120px 120px;

로그인 후 복사

그리드의 셀 부분에 대한 CSS는 다음과 같습니다. 이번에는 2×4 8셀 그리드이지만 그 안에는 3개의 셀만 배열했습니다. 첫 번째 행의 두 번째 열에 컨테이너의 프레임을 지정하고, 두 번째 행에 있는 셀의 세 번째 열에 프레임을 지정하고, 첫 번째 행에 있는 셀의 네 번째 열에 있는 세 위치에 내용의 프레임을 지정합니다.

.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

로그인 후 복사

그리드의 HTML 부분입니다. 그리드 프레임 내의 세 개의 div 프레임을 설명합니다.

<div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>

로그인 후 복사

결과 표시

위의 HTML을 Firefox 브라우저에 표시합니다. 아래와 같은 효과가 표시됩니다. 콘텐츠 프레임은 CSS에서 지정한 위치에 배치됩니다.

CSS 그리드 레이아웃(그리드) 사용법에 대한 자세한 설명

Google Chrome에서 표시되는 효과는 다음과 같습니다.

CSS 그리드 레이아웃(그리드) 사용법에 대한 자세한 설명

위 내용은 CSS 그리드 레이아웃(그리드) 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!