CSS のグリッドプロパティの使用に関する詳細な説明

CSS のグリッドプロパティの使用に関する詳細な説明

グリッドレイアウト

親要素に追加された属性

グリッドテンプレートの列/グリッドテンプレートの行

  • 要素の行または列の幅と高さを定義します
  • 親要素が 9 つの均等な部分に分割されている場合、子要素がいくつあっても、すべて 9 つの均等な部分に表示されます。
  • grid-template-columns: 33% 33% 33%; は、grid-template-columns:repeat(3, 33%); と記述できます。
。容器 {
  幅: 200ピクセル;
  高さ: 200px;
  表示: グリッド;
  背景色: コーラル;
  マージン: 10px;
}

.コンテナ .アイテム {
  境界線: 1px 実線 #ccc;
  背景色: チョコレート;
}
.コンテナ1 {
  グリッドテンプレート列: 33% 33% 33%;
  グリッドテンプレート行: 33% 33% 33%;
}

グリッドテンプレート領域

  • 親要素のgrid-template-areasと子要素のgrid-areaはグリッド領域を定義します。
  • ピリオドは空のグリッド セルを表します。
。容器 {
  幅: 200ピクセル;
  高さ: 200px;
  表示: グリッド;
  背景色: コーラル;
  マージン: 10px;
}

.コンテナ .アイテム {
  境界線: 1px 実線 #ccc;
  背景色: チョコレート;
}
.コンテナ2 {
  グリッドテンプレートの列: 1fr 1fr 1fr 1fr;
  グリッドテンプレートの行: 1fr 1fr 1fr;
  grid-template-areas: "ヘッダー ヘッダー . フッター"
    「メイン メイン . サイドバー」
    「メイン メイン . サイドバー」;
}

.コンテナ2 .アイテム-1 {
  グリッドエリア: ヘッダー;
}

.コンテナ2 .アイテム2 {
  グリッドエリア: メイン;
}

.コンテナ2 .アイテム3 {
  グリッドエリア: サイドバー;
}

.コンテナ2 .アイテム-4 {
  グリッドエリア: フッター;
}
<div class="コンテナ コンテナ2">
  <div class="item item-1">ヘッダー</div>
  <div class="item item-2">メイン</div>
  <div class="item item-3">サイドバー</div>
  <div class="item item-4">フッター</div>
</div>

グリッド列ギャップ/グリッド行ギャップ/グリップギャップ

  • グリッド線のサイズ、またはグリッド項目間の間隔を指します。
。容器 {
  幅: 200ピクセル;
  高さ: 200px;
  表示: グリッド;
  背景色: コーラル;
  マージン: 10px;
}

.コンテナ .アイテム {
  境界線: 1px 実線 #ccc;
  背景色: チョコレート;
}
.コンテナ3 {
  グリッドテンプレート列: repeat(3, 30%);
  グリッドテンプレート行: repeat(3, 30%);
  グリッド列ギャップ: 2%;
  グリッド行ギャップ: 2%;
}
<div class="コンテナ コンテナ3">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
  <div class="item item-6"></div>
  <div class="item item-7"></div>
  <div class="item item-8"></div>
  <div class="item item-9"></div>
</div>

justify-items/align-itemsjustify-items

  • 子要素の内容を垂直列軸に揃える
  • align-itemsは子要素の内容を水平行軸に揃えます。
  • どちらの属性にも4つの値があります
  • 私の例では、比較しやすいようにグリッドをネストしました。
。容器 {
  幅: 200ピクセル;
  高さ: 200px;
  表示: グリッド;
  背景色: コーラル;
  マージン: 10px;
}

.コンテナ .アイテム {
  境界線: 1px 実線 #ccc;
  背景色: チョコレート;
}

.コンテナ4 {
  幅: 400ピクセル;
  高さ: 200px;
  グリッドテンプレート列: repeat(4, 25%);
  グリッドテンプレート行: repeat(2, 50%);
}
.コンテナ4 .アイテム {
  表示: グリッド;
}
.container4 .item div {
  背景色: コーラル;
  境界線: 1px 破線 #aaa
}
.コンテナ4 .アイテム-1 {
  グリッドテンプレート列: repeat(2, 50%);
  グリッドテンプレート行: repeat(2, 50%);
  項目の整列: 開始;
}
.コンテナ4 .アイテム-2 {
  グリッドテンプレート列: repeat(2, 50%);
  グリッドテンプレート行: repeat(2, 50%);
  項目の揃え方: 終了;
}
.コンテナ4 .アイテム3 {
  グリッドテンプレート列: repeat(2, 50%);
  グリッドテンプレート行: repeat(2, 50%);
  項目の位置揃え: 中央;
}
.コンテナ4 .アイテム4 {
  グリッドテンプレート列: repeat(2, 50%);
  グリッドテンプレート行: repeat(2, 50%);
  項目の位置揃え: 伸縮;
}
.コンテナ4 .アイテム-5 {
  グリッドテンプレート列: repeat(2, 50%);
  グリッドテンプレート行: repeat(2, 50%);
  アイテムの位置を揃える: 開始;
}
.コンテナ4 .アイテム-6 {
  グリッドテンプレート列: repeat(2, 50%);
  グリッドテンプレート行: repeat(2, 50%);
  align-items: 終了;
}
.コンテナ4 .アイテム-7 {
  グリッドテンプレート列: repeat(2, 50%);
  グリッドテンプレート行: repeat(2, 50%);
  アイテムの位置を中央揃えにします。
}
.コンテナ4 .アイテム-8 {
  グリッドテンプレート列: repeat(2, 50%);
  グリッドテンプレート行: repeat(2, 50%);
  アイテムの位置を揃える: ストレッチ;
}
<div class="コンテナ コンテナ4">
  <div class="item item-1">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-2">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-3">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-4">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-5">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-6">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-7">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-8">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>

コンテンツの両端揃え/コンテンツの配置

  • 子要素の配置を設定します。justify は垂直方向、align は水平方向を意味します。
。容器 {
  幅: 200ピクセル;
  高さ: 200px;
  表示: グリッド;
  背景色: コーラル;
  マージン: 10px;
}

.コンテナ .アイテム {
  境界線: 1px 実線 #ccc;
  背景色: チョコレート;
}

.コンテナ5 {
  幅: 700ピクセル;
  高さ: 200px;
  グリッドテンプレート列: repeat(7, 14%);
  グリッドテンプレート行: repeat(2, 50%);
}

.コンテナ5 .アイテム {
  表示: グリッド;
}

.container5 .item div {
  背景色: コーラル;
  境界線: 1px 破線 #aaa
}

.コンテナ5 .アイテム-1 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  コンテンツの正当化: 開始;
}

.コンテナ5 .アイテム-2 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  コンテンツの正当化: 終了;
}

.コンテナ5 .アイテム3 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  コンテンツの中央揃え: 中央;
}

.コンテナ5 .アイテム-4 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  コンテンツの正当化: ストレッチ;
}

.コンテナ5 .アイテム5 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  コンテンツの両端揃え: スペースを空ける;
}

.コンテナ5 .アイテム-6 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  コンテンツの両端揃え: スペースの間;
}

.コンテナ5 .アイテム-7 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  コンテンツの均等配置: スペースを均等に;
}

.コンテナ5 .アイテム-8 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  align-content: 開始;
}

.コンテナ5 .アイテム-9 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  align-content: 終了;
}

.コンテナ5 .アイテム-10 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  コンテンツの位置を中央揃えにします。
}

.コンテナ5 .アイテム-11 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  align-content: ストレッチ;
}

.コンテナ5 .アイテム-12 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  align-content: スペースを空ける;
}

.コンテナ5 .アイテム-13 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  align-content: スペース間のスペース;
}

.コンテナ5 .アイテム-14 {
  グリッドテンプレート列: repeat(2, 40%);
  グリッドテンプレート行: repeat(2, 40%);
  align-content: スペース均等;
}
<div class="コンテナ コンテナ5">
  <div class="item item-1">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-2">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-3">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-4">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-5">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-6">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-7">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-8">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-9">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-10">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-11">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-12">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-13">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
  <div class="item item-14">
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
    <div>リスト</div>
  </div>
</div>

グリッド自動列/グリッド自動行グリッド列

  • 値が 1/2 の形式の場合、グリッドは最初の列から始まり、2 番目の列で終わることを意味します。この属性で定義されたグリッドが親要素の範囲を超える場合、暗黙的なグリッドが自動的に生成されます。
  • grid-auto-columns プロパティと grid-auto-rows プロパティは、これらの暗黙的なグリッド トラックの幅を指定するために使用されます。
。容器 {
  幅: 200ピクセル;
  高さ: 200px;
  表示: グリッド;
  背景色: コーラル;
  マージン: 10px;
}

.コンテナ .アイテム {
  境界線: 1px 実線 #ccc;
  背景色: チョコレート;
}

.コンテナ6 {
  幅: 120ピクセル;
  高さ: 180ピクセル;
  グリッドテンプレートの列: 60px 60px;
  グリッドテンプレートの行: 90px 90px;
  グリッド自動列: 60px;
}
.コンテナ6 .アイテム-1 {
  グリッド列: 1 / 2;
  グリッド行: 2 / 3;
  境界線: 1px 実線 #ccc;
}
.コンテナ6 .アイテム-2 {
  グリッド列: 5 / 6;
  グリッド行: 2 / 3;
  境界線: 1px 実線 #ccc;
}
<div class="コンテナ コンテナ6">
  <div class="item-1">1/2&2/3</div>
  <div class="item-2">5/6&2/3</div>
</div>

グリッド自動フロー

  • グリッド要素がない場合に自動的に配置する
  • 行は左から右、列は上から下を意味します。
。容器 {
  幅: 200ピクセル;
  高さ: 200px;
  表示: グリッド;
  背景色: コーラル;
  マージン: 10px;
}

.コンテナ .アイテム {
  境界線: 1px 実線 #ccc;
  背景色: チョコレート;
}

.コンテナ7 {
  表示: グリッド;
  幅: 200ピクセル;
  高さ: 40px;
  グリッドテンプレートの列: 40px 40px 40px 40px 40px;
  グリッドテンプレートの行: 40px 40px;
  /* グリッド自動フロー: 行; */
  グリッド自動フロー: 列;
}
.コンテナ7 .アイテム-1 {
  グリッド列: 1;
  グリッド行: 1 / 3;
}

.コンテナ7 .アイテム-5 {
  グリッド列: 5;
  グリッド行: 1 / 3;
}
<div class="コンテナ コンテナ7">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
</div>

子要素に追加された属性

グリッド列開始/グリッド列終了/グリッド行開始/グリッド行終了/グリッド列/グリッド行

  • グリッドの開始位置と終了位置を定義します
  • 値は行の開始を示す数値です。値はスパンに数字を加えたもので、この行の位置がカバーされていることを示します。
。容器 {
  幅: 200ピクセル;
  高さ: 200px;
  表示: グリッド;
  背景色: コーラル;
  マージン: 10px;
}

.コンテナ .アイテム {
  境界線: 1px 実線 #ccc;
  背景色: チョコレート;
}

.コンテナ8 {
  上マージン: 20px;
  グリッドテンプレート列: repeat(5, 20%);
  グリッドテンプレート行: repeat(5, 20%);
}
.コンテナ8 .アイテム-1 {
  グリッド列開始: 2;
  グリッド列の終了: 4;
  グリッド行開始: 1;
  グリッド行の終了: 2;
}
.コンテナ8 .アイテム-2 {
  グリッド列開始: 4;
  グリッド列の終了: スパン 5;
  グリッド行開始: 2;
  グリッド行の終了: スパン 5;
}
.コンテナ8 .アイテム-3 {
  グリッド列: 1 / スパン 2;
  グリッド行: 2 / スパン 4;
}
<div class="コンテナ コンテナ8">
  <div class="item item-1">アイテム-1</div>
  <div class="item item-2">アイテム-2</div>
  <div class="item item-3">アイテム-3</div>
</div>

自己正当化/自己整列

グリッドアイテムのコンテンツはグリッド線に沿って配置されます

。容器 {
  幅: 200ピクセル;
  高さ: 200px;
  表示: グリッド;
  背景色: コーラル;
  マージン: 10px;
}

.コンテナ .アイテム {
  境界線: 1px 実線 #ccc;
  背景色: チョコレート;
}
.コンテナ9 {
  幅: 400ピクセル;
  高さ: 200px;
  グリッドテンプレート列: repeat(4, 25%);
  グリッドテンプレート行: repeat(2, 50%);
}
.コンテナ9 .アイテム-1 {
  正当化-自己: 開始;
}
.コンテナ9 .アイテム-2 {
  正当化-自己: 終了;
}
.コンテナ9 .アイテム3 {
  自己正当化: 中央揃え;
}
.コンテナ9 .アイテム-4 {
  正当化-自己：ストレッチ;
}
.コンテナ9 .アイテム-5 {
  align-self: 開始;
}
.コンテナ9 .アイテム-6 {
  align-self: 終了;
}
.コンテナ9 .アイテム-7 {
  位置合わせ: 中央;
}
.コンテナ9 .アイテム-8 {
  align-self: ストレッチ;
}
<div class="コンテナ コンテナ9">
  <div class="item item-1">アイテム-1</div>
  <div class="item item-2">アイテム-2</div>
  <div class="item item-3">アイテム-3</div>
  <div class="item item-4">アイテム-4</div>
  <div class="item item-5">アイテム-5</div>
  <div class="item item-6">アイテム-6</div>
  <div class="item item-7">アイテム-7</div>
  <div class="item item-8">アイテム-8</div>
</div>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

>>:  角丸四角形の HTML+CSS 実装コード

推薦する

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

JS でシンプルなデータ監視を実装する方法

目次概要最初のステップステップ2なぜ別の _data が必要なのでしょうか?データにもう少しデータを...

今日は、珍しいけれど役に立つJSテクニックをいくつか紹介します

1. 戻るボタンhistory.back() を使用してブラウザの「戻る」ボタンを作成します。 &l...

メモリ構成が過剰でMySQLが起動できない問題の解決方法

問題の説明MySQL の起動時にエラーが報告されます。エラー ログを確認してください。 [エラー] ...

Docker Compose マルチコンテナデプロイメントの実装

目次1. WordPressの導入1. 環境を整える(II) イメージを実行するDocker の作成...

Vueはシンプルなデータ双方向バインディングを実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。初心者...

Vueのフィルターについて知っておくべきこと

目次序文フィルターとは何かフィルターの使い方グローバルフィルターローカルフィルターフィルターは直列に...

VueはPCで写真をアップロードする機能を実現

この記事の例では、PC上で写真アップロード機能を実現するためのVueの具体的なコードを参考までに共有...

VUE ユニアプリライフサイクルに関する簡単な説明

目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

MySQL Truncate の使用方法の詳細な説明

目次MySQL 切り捨ての使用1. 構文を切り捨てる2. Truncateの使用上の注意3. TRU...

解析を実装するためにPostgreSQLデータベースを書き込むSQLスクリプト関数

この記事は主に、PostgreSQL データベースを記述して解析を実装する SQL スクリプト関数を...

nginxで静的リソースを公開する方法

ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...

HTML4.0 要素のデフォルトスタイルの配置

コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...