ホームページ > 記事 > ウェブフロントエンド > CSSグリッドレイアウト（グリッド）の使い方を詳しく解説

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

不言オリジナル: 2018-11-14 15:10:524365ブラウズ

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 サイトの他の関連記事を参照してください。

firefox css chrome html 字符串

声明：

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

前の記事：CSSの位置決めとは何ですか？ CSS位置決めの使い方次の記事：CSSの位置決めとは何ですか？ CSS位置決めの使い方

続きを見る