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

推薦する

Linuxはlsofコマンドを使用してファイルのオープンステータスを確認します

序文Linux では「すべてがファイル」であることは誰もが知っているので、ファイルのオープン状態を確...

CSS3 でクールなスライス画像カルーセル効果を実現

今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...

DockerでJenkinsをインストールし、初期プラグインのインストール失敗の問題を解決する

Jenkins をインストールした後、プラグインの初期ダウンロードが常に失敗し、インストールが失敗し...

Nodejs は JSON 文字列を JSON オブジェクトに変換するエラー解決法

JSON 文字列を JSON オブジェクトに変換するにはどうすればいいですか? JSON.parse...

Vue 手書き読み込みアニメーション プロジェクト

ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフ...

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...

IE8対応のボーダー半径処理方法

canisue (http://caniuse.com/#search=border-radius)...

Linux 7.6 バイナリに MySQL 8.0.27 をインストールする詳細な手順

目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...

フロントエンドの上級者向けコースでは、JavaScript のストレージ機能の使い方を学習します。

目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...

中国における中国語ドメイン名の人気は新たなクライマックスを迎えた

<br />外交部などの中央政府機関、各レベルの地方政府、その他の国家機関や部門が率先し...

MySQL InnoDB ロック メカニズムの詳細な例

1. InnoDBのロック機構InnoDB ストレージ エンジンは、行レベルのロックとトランザクショ...

...

さようなら Docker: 5 分で Containerd に移行する方法

Docker は非常に人気のあるコンテナ技術です。K8S によって廃止され、別のコンテナ技術である ...

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...

Nginx proxy_pass の / スラッシュによって引き起こされた殺人事件の詳細な説明

背景nginx サーバー モジュールは 2 つのサーバーにプロキシする必要があるため、異なるサーバー...