그리드 레이아웃에서 다중 그리드 셀(결합 셀)을 생성하는 방법 소개-CSS 튜토리얼-php.cn

그리드 레이아웃에서 다중 그리드 셀(결합 셀)을 생성하는 방법 소개

不言

풀어 주다： 2018-11-29 17:18:47

원래의

3412명이 탐색했습니다.

그리드 레이아웃을 사용하여 여러 그리드에 걸쳐 있는 셀을 생성하는 경우 그리드-열 및 그리드-행에서 셀의 시작 및 끝 경계 범위를 지정할 수 있습니다.

그리드 레이아웃에서 다중 그리드 셀(결합 셀)을 생성하는 방법 소개

먼저 Grid-column과 Grid-Row의 형식을 살펴보겠습니다.

grid-column :(水平方向起始位置的边界线）/（水平方向单元格结束位置的边界线）

로그인 후 복사

grid-row :(垂直单元格起始位置的边界线）/（单元格在垂直方向上的结束位置的边界线）

로그인 후 복사

경계선은 다음과 같이 할당됩니다. 가로 방향은 그리드의 가장 왼쪽 방향입니다. 그리드 프레임의 왼쪽 경계선은 1번이고, 오른쪽으로 갈수록 숫자가 1씩 증가합니다. 세로 방향이 그리드의 상단이고, 그리드 프레임 위의 경계선이 1번이고, 하단으로 갈수록 숫자가 증가합니다.

그리드 레이아웃에서 다중 그리드 셀(결합 셀)을 생성하는 방법 소개

예시

그리드 레이아웃을 이용해서 아래와 같은 레이아웃을 만들어보세요.

그리드 레이아웃에서 다중 그리드 셀(결합 셀)을 생성하는 방법 소개

설명:

위의 주황색 셀은 그리드-열:1/6이고, 그리드-행:1/2;

왼쪽의 파란색 셀은 그리드-열:1/3입니다. 그리드 행:2/4;

올바른 녹색 셀은 그리드 열:3/6; 그리드 행:2/3;

왼쪽 하단의 회색 셀은 그리드 열:1/3입니다. -row:4/5;

오른쪽 하단의 노란색 셀은 Grid-column:3/6; Grid-row:3/5;아래 흰색 셀

은

grid-column:1/2; 그리드 행:5/6;

그리드-열:2/3; 그리드-행:5/6;

그리드-열:3/4; 그리드-행:5/6;

그리드-열: 4/5;grid-row:5/6;

grid-column:5/6;grid-row:5/6;

위 레이아웃은 그리드 셀의 클래스에 기록됩니다.

코드는 다음과 같습니다

다음 HTML과 CSS를 작성하세요.

SimpleGrid.html

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="GridMerge.css" />
    <title></title>
</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 class="GridItem9">内容9</div>
    <div class="GridItem10">内容10</div>
  </div>
  </body>
  </html>

로그인 후 복사

SimpleGrid.css

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

로그인 후 복사

실행 결과

웹 브라우저를 사용하여 위의 HTML 파일을 표시합니다. 아래와 같은 효과가 표시됩니다. 우리 레이아웃에는 여러 그리드에 걸쳐 있는 셀이 포함되어 있습니다.

그리드 레이아웃에서 다중 그리드 셀(결합 셀)을 생성하는 방법 소개