그리드 레이아웃에서는 그리드의 너비를 표시 영역의 비율이나 전체 페이지의 너비로 지정할 수 있지만, 그리드의 너비를 비율로 지정할 경우 단위는 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 페이지를 보여줍니다. 아래와 같은 효과가 표시됩니다.
창 너비를 줄입니다. 창 너비가 줄어들면 그리드 너비도 줄어듭니다. 그리드 셀 너비 비율을 유지하면서 너비가 줄어듭니다.
위 내용은 그리드 레이아웃에서 그리드의 너비는 전체 페이지의 너비와 영역의 비율로 지정됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!