ホームページ  >  記事  >  ウェブフロントエンド  >  グリッドレイアウトでは、グリッドの幅はページ全体の面積と幅の比率として指定されます。

グリッドレイアウトでは、グリッドの幅はページ全体の面積と幅の比率として指定されます。

不言
不言オリジナル
2018-11-29 14:41:462851ブラウズ

グリッドレイアウトでは、グリッドの幅を表示領域の比率またはページ全体の幅で指定できますが、グリッドの幅を比率で指定する場合は、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。