ホームページ >ウェブフロントエンド >CSSチュートリアル >グリッドレイアウトでは、グリッドの幅はページ全体の面積と幅の比率として指定されます。
グリッドレイアウトでは、グリッドの幅はページ全体の面積と幅の比率として指定されます。
- 不言オリジナル
- 2018-11-29 14:41:462898ブラウズ
グリッドレイアウトでは、グリッドの幅を表示領域の比率またはページ全体の幅で指定できますが、グリッドの幅を比率で指定する場合は、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>説明:
この例では、CSS の説明Containerクラスの内容は以下のようになります。グリッドの列 (水平) を 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 クラスの設定を以下のように変更することを確認します。
以下の説明では、1列目、3列目、5列目は1fr、2列目は3fr、4列目は2frとして説明します。全体の合計は 8 fr であるため、列 1、3、および 5 のセルの幅は表示領域の幅 (ウィンドウ幅) の 8 分の 1 になります。同様に、2 番目の列の幅は 3/8 で、4 番目の列の幅は 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 中国語 Web サイトの他の関連記事を参照してください。