CSSグリッドレイアウト（グリッド）の使い方を詳しく解説-CSSチュートリアル-php.cn

CSSグリッドレイアウト（グリッド）の使い方を詳しく解説

不言

リリース： 2018-11-14 15:10:52

オリジナル

4518 人が閲覧しました

Web ページにはさまざまなレイアウトがありますが、CSS グリッドレイアウトを使用すると、単純な説明を含む複雑な列を作成できます。この記事ではCSSのグリッドレイアウトを簡単な例に基づいて紹介します。

最初にコンテナフレームワークを見てみましょう

#(id名){
    display: grid;    
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);    
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

ログイン後にコピー

または

.(class名){
    display: grid;    
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);  
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

ログイン後にコピー

イントラネットグリッドをセットアップする方法もあります。

#(id名){
    display: inline-grid;    
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);  
      grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

ログイン後にコピー

.(class名){
    display: inline-grid;     
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);  
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

ログイン後にコピー

グリッドフレームワーク(プロジェクトフレームワーク)

グリッドフレームとなる要素に以下のCSSを指定します。

#(id名){
    grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;   
    grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
    }

ログイン後にコピー

または

.(class名){
   grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;   
    grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
    }

ログイン後にコピー

または

#(id名){
    grid-column-start: (列方向的网格的开始位置);    
        grid-column-end: (列方向的网格的结束位置);    
        grid-row-start: (行方向的网格的开始位置);    
        grid-row-end: (行方向的网格的结束位置);
        }

ログイン後にコピー

または

.(class名){
          grid-column-start: (列方向的网格的开始位置);    
          grid-column-end: (列方向的网格的结束位置);    
          grid-row-start: (行方向的网格的开始位置);    
          grid-row-end: (行方向的网格的结束位置);
        }

ログイン後にコピー

記述例

net グリッド線は、グリッドの開始位置と終了位置を指定します。

以下のコードの場合、セルの幅は2番目のグリッドの縦線から4番目のグリッドの縦線までとなります。

 grid-column: 2 / 4;

ログイン後にコピー

コード例

次の CSS ファイルと HTML ファイルを作成します。

SimpleGrid.css

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

ログイン後にコピー

SimpleGrid.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGrid.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>
  </body>
  </html>

ログイン後にコピー

説明:

コンテナの次の CSS 記述は、4 行 × 2 を作成します。行グリッド。

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

ログイン後にコピー

グリッドの各要素の CSS は (GridItem 1~GridItem 8) になります。グリッドごとにグリッドセルを定義します。グリッドの各セルの背景色を変更します。

.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}

ログイン後にコピー

結果の表示

Firefox ブラウザを使用して、上記の HTML ファイルを表示します。以下のような効果が表示されます。 2 行×4 列のグリッドを作成し、各セルに文字列「item n」を表示します。さらに、セルの背景色をセルごとに設定できます。

CSSグリッドレイアウト（グリッド）の使い方を詳しく解説

同様に、同じファイルが Google Chrome で表示されます。以下のような効果が表示されます。

CSSグリッドレイアウト（グリッド）の使い方を詳しく解説

#IE ブラウザではグリッド表示が完了できず、表示が折りたたまれています。

すべてのグリッドにセルがない例

前の例では、セル内のすべてのグリッドにオプションがある場合を紹介しましたが、オプションがある場合でも機能します。すべてのグリッドでプロジェクトを実行します。以下は、グリッド内のまばらな (離散的な) セルの例です。

コード

次の CSS、HTML ファイルを作成します。

SimpleGridSparse.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border: solid #ff6a00 1px;    
    background-color:#E0E0E0;
}
.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

ログイン後にコピー

SimpleGridSparse.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGridSparse.css" />
  </head>
  <body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>
  </body>
  </html>

ログイン後にコピー

手順:

次のコードによる, グリッドの外枠は2行×4列のグリッドです。

 display: grid;  
 grid-template-columns: 160px 160px 160px 160px;  
 grid-template-rows: 120px 120px;

ログイン後にコピー

グリッドのユニット部分のCSSは以下の通りです。今回は2×4の8マスグリッドですが、3マスしか配置していません。コンテナを 2 列目の 1 行目に、セルの 2 行目を 3 列目に、コンテンツを 4 列目のセルの 1 行目の 3 か所に枠付けします。

.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

ログイン後にコピー

グリッドの HTML 部分。グリッドフレーム内の 3 つの div フレームを記述します。

<div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>

ログイン後にコピー

結果の表示

上記のHTMLをFirefoxブラウザで表示してみます。以下のような効果が表示されます。コンテンツフレームはCSSで指定された位置に配置されます。

CSSグリッドレイアウト（グリッド）の使い方を詳しく解説

Google Chromeで表示される効果は以下の通りです。

CSSグリッドレイアウト（グリッド）の使い方を詳しく解説

以上がCSSグリッドレイアウト（グリッド）の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。