그리드 레이아웃에서 그리드의 너비는 전체 페이지의 너비와 영역의 비율로 지정됩니다.-CSS 튜토리얼-php.cn

그리드 레이아웃에서 그리드의 너비는 전체 페이지의 너비와 영역의 비율로 지정됩니다.

不言

풀어 주다： 2018-11-29 14:41:46

원래의

2896명이 탐색했습니다.

그리드 레이아웃에서는 그리드의 너비를 표시 영역의 비율이나 전체 페이지의 너비로 지정할 수 있지만, 그리드의 너비를 비율로 지정할 경우 단위는 fr을 사용해야 합니다. 아래에서는 구체적인 내용을 살펴보겠습니다.

그리드 레이아웃에서 그리드의 너비는 전체 페이지의 너비와 영역의 비율로 지정됩니다.

말하지 말고 구체적인 예를 살펴보겠습니다

코드는 다음과 같습니다.

다음 HTML 파일을 작성하세요

SimpleGridFr.css

.Container {
    display: grid;    
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;    
    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: 5 / 6;    
    grid-row: 1 / 2;    
    background-color: #7ee68d;
    }
.GridItem6 {
    grid-column: 1 / 2;    
    grid-row: 2 / 3;    
    background-color: #7ee6e2;
    }
.GridItem7 {
    grid-column: 2 / 3;    
    grid-row: 2 / 3;    
    background-color: #95a7f5
    }
.GridItem8 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #d095f5;
    }
.GridItem9 {
    grid-column: 4 / 5;    
    grid-row: 2 / 3;    
    background-color: #f5aee4;
    }
.GridItem10 {
    grid-column: 5 / 6;    
    grid-row: 2 / 3;    
    background-color: #edc3a4;
    }

로그인 후 복사

SimpleGridFr.html

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

로그인 후 복사

지침:

이 예제에서 Container 클래스의 CSS 설명은 다음과 같습니다. 그리드 열(가로)을 5개 열로 설정하고 행(세로)을 2개 행으로 설정했습니다.
grid-template-columns의 값은 1fr로 설정되어 있으며, 이 설정을 사용하면 그리드의 너비가 비례적으로 표시됩니다. 이 예에서는 1fr에 5가지 설정이 있으므로 1fr의 너비는 표시 영역(전체 페이지) 너비의 1/5로 표시됩니다.

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

로그인 후 복사

HTML 페이지의 "GridItem 1" ~ "Griditem 10"의 div 상자를 그리드의 각 셀에 할당합니다.

결과 표시

위 HTML 페이지를 실행하세요. 아래와 같은 효과가 표시됩니다. 5개의 그리드 너비가 동일한 간격으로 표시됩니다.

그리드 레이아웃에서 그리드의 너비는 전체 페이지의 너비와 영역의 비율로 지정됩니다.

창 너비를 줄이면 각 그리드의 단위 프레임 너비가 줄어듭니다.

그리드 레이아웃에서 그리드의 너비는 전체 페이지의 너비와 영역의 비율로 지정됩니다.

창을 줄여도 각 그리드의 셀 프레임 너비는 계속해서 줄어듭니다

그리드 레이아웃에서 그리드의 너비는 전체 페이지의 너비와 영역의 비율로 지정됩니다.

마지막으로 다음 코드의 일부 값을 변경하여 어떤 일이 일어나는지 살펴보겠습니다

grid-tempat에서 확인하세요 - COumns 속성에 1 fr 이외의 값이 지정된 경우 Continer 클래스의 설정을 다음과 같이 변경합니다.

아래 설명에서 첫 번째 열, 세 번째 열, 다섯 번째 열은 1fr, 두 번째 열은 3fr, 네 번째 열은 2fr입니다. 전체 합계가 8fr이므로 1열, 3열, 5열의 셀 너비는 표시 영역 너비(창 너비)의 1/8입니다. 마찬가지로 두 번째 열의 너비는 3/8이고 네 번째 열의 너비는 1/4(2/8)입니다.

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

로그인 후 복사

변경된 HTML 페이지를 보여줍니다. 아래와 같은 효과가 표시됩니다.

그리드 레이아웃에서 그리드의 너비는 전체 페이지의 너비와 영역의 비율로 지정됩니다.