ホームページ > 記事 > ウェブフロントエンド > グリッドレイアウトでは、グリッドの幅はページ全体の面積と幅の比率として指定されます。
グリッドレイアウトでは、グリッドの幅を表示領域の比率またはページ全体の幅で指定できますが、グリッドの幅を比率で指定する場合は、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; }
<!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 ページを実行します。以下のような効果が表示されます。 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 サイトの他の関連記事を参照してください。