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 実装コード

推薦する

MySQL ビューの一貫性を確保する方法の詳細な説明 (チェック オプション付き)

この記事では、例を使用して、MySQL ビューの一貫性を確保する方法 (チェック オプションを使用)...

docker ベースの mariadb のインストール構成プロセスの分析

1. インストール dockerhub を通じてインストールする mariadb のバージョンを検索...

Linux で rc.local ファイルがない場合の完璧なソリューション

新しい Linux ディストリビューションには rc.local ファイルがなくなりました。サービス...

HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...

MySQL の DOS ウィンドウの文字化け問題を解決する方法

文字化けしたコードの問題は次のとおりです。 この問題の原因は非常に単純です。コマンドラインのエンコー...

HTML のボタン タグをクリックしてページにジャンプする 3 つの方法

方法1: onclickイベントを使用する <input type="button&...

MySQL がテーブルを読み取れないエラー (MySQL 1018 エラー) の解決方法

1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...

JavaScript の差異を利用して比較ツールを実装する

序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...

dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策

1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...

HTML フォームタグチュートリアル (3): 入力タグ

HTML フォーム タグのチュートリアル。このセクションでは、主に Web ページで INPUT タ...

仮想マシンクローン Linux centos6.5 システム ネットワーク カード構成グラフィック チュートリアル

Linux システムに触れたばかりの初心者として、VMware 仮想マシンに CentOS6.5 シ...

html+cssレイアウトの3つの方法（ナチュラルレイアウト/フローレイアウト/ポジショニングレイアウト）

1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2....

SSH ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細

パート 1 SSH ポート転送の概要カフェで無料Wi-Fiを利用しているとき、誰かがあなたのパスワー...

Web フォントの読み込みを最適化する方法をご存知ですか?

タイトル通りです！一般的に使用される font-family はブラウザの組み込みフォントを読み込み...

Docker に Solr 8.6.2 をインストールし、中国語の単語セグメンターを構成する方法

1. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...