CSS グリッド - 詳しい説明

Sep 07, 2024 am 06:41 AM

CSS Grid - A Deep Dive

レクチャー 9: CSS グリッド - 詳しい説明

「基礎から応用まで」コースの第9回講座へようこそ。この講義では、複雑な Web レイアウトを簡単に作成できる強力なレイアウト システムである CSS Grid について説明します。 Flexbox は 1 次元レイアウト (行または列) に最適ですが、CSS グリッドは 2 次元レイアウト システムを提供し、行と列の両方を同時に制御できます。


CSS グリッドとは何ですか?

CSS グリッドは、柔軟で応答性の高いグリッドベースのレイアウトの作成を可能にする CSS のレイアウト システムです。要素を行と列に配置できるため、Flexbox よりもレイアウト構造をより細かく制御できます。


グリッドの用語

例に入る前に、いくつかの重要な用語について理解しましょう:

  • Grid Container: グリッドを含む親要素。
  • グリッド項目: グリッドコンテナー内の子要素。
  • グリッド線: グリッドの水平および垂直の分割線。
  • グリッド トラック: 行または列を形成する 2 本のグリッド ライン間のスペース。
  • グリッドセル: 行と列の交差によって形成されるグリッド内の最小の個々の単位。

1.基本的なグリッド構造

グリッドの使用を開始するには、display:grid をコンテナに適用します。

  • :
  .grid-container {
    display: grid;
  }
ログイン後にコピー

display:grid が適用されると、コンテナの子要素がグリッド項目になります。


2.グリッドの列と行の定義

grid-template-columns プロパティと Grid-template-rows プロパティを使用して、グリッドに含める行と列の数を定義できます。

  • : 3 列 2 行のグリッドを作成します。
  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 50px 150px;
  }
ログイン後にコピー

これにより、次のグリッドが作成されます:

  • 3 列: 最初の列の幅は 100 ピクセル、2 番目の列は 200 ピクセル、3 番目の列は 100 ピクセルです。
  • 2 行: 最初の行の高さは 50 ピクセル、2 行目は 150 ピクセルです。

3.小数単位 (fr) の使用

CSS グリッドでは、グリッド コンテナー内の利用可能なスペースの一部を表す小数単位 fr が導入されています。これは、グリッド項目間にスペースを割り当てる柔軟な方法です。

  • : fr を使用して空間を均等に分割します。
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
ログイン後にコピー

この例では、3 つの列の幅は同じになり、それぞれが使用可能なスペースの一部を占めます。


4.グリッドアイテムの配置

grid-column プロパティと Grid-row プロパティを使用して、各グリッド項目を配置する場所を制御できます。これらのプロパティを使用すると、項目の開始位置と終了位置を指定できます。

  • :
  .grid-item {
    grid-column: 1 / 3; /* This item spans from column 1 to column 3 */
    grid-row: 1 / 2;    /* This item is placed in the first row */
  }
ログイン後にコピー

この場合、グリッド項目は最初の 2 列にまたがりますが、最初の行に配置されます。


5.グリッドギャップ

grid-gap プロパティは、グリッド項目間に水平方向と垂直方向の両方のスペースを追加します。

  • : 列と行の間にギャップを追加します。
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }
ログイン後にコピー

これにより、すべてのグリッド項目間に等しい 20 ピクセルのギャップが作成されます。


6.自動フィットと自動入力

自動フィットと自動入力は、グリッドがコンテナのサイズに基づいてできるだけ多くの列を自動的に配置できる強力な機能です。

  • 自動調整の例:
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
ログイン後にコピー

ここでは、グリッドは可能な限り多くの列に自動的に適合し、各列の幅は少なくとも 100 ピクセルになりますが、利用可能なスペースを満たすまで拡大することができます。


実践例: 単純なグリッド レイアウト

CSS Grid を使用して簡単なグリッド レイアウトを作成してみましょう。

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>
ログイン後にコピー

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}
ログイン後にコピー

この例では:

  • .grid-container には、repeat(3, 1fr) を使用して作成された 3 つの等しい幅の列があります。
  • グリッド項目間にスペースを追加するために、グリッド ギャップは 10 ピクセルに設定されます。
  • 各 .grid-item には、視認性を高めるためにパディングと背景色が適用されています。

7.ネストされたグリッド

グリッドをネストすることもでき、グリッド項目自体がグリッド コンテナーになります。これにより、より複雑なレイアウトが可能になります。

  • :
  .nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
ログイン後にコピー

この概念を適用して、別のグリッド内にグリッドを作成し、レイアウトをより細かく制御できます。


Responsive Design with CSS Grid

CSS Grid is great for responsive design. You can adjust the number of columns based on the screen size using media queries.

  • Example: Creating a responsive grid.
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  @media screen and (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }
ログイン後にコピー

In this example:

  • The grid starts with three columns.
  • On screens smaller than 768px, the grid switches to two columns.
  • On screens smaller than 480px, the grid collapses to a single column.

Practice Exercise

  1. Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
  2. Use grid-template-columns and grid-template-rows to define the grid structure.
  3. Make the layout responsive by adjusting the number of columns on different screen sizes.

Next Up: In the next lecture, we’ll explore Advanced CSS Grid Techniques, including grid areas, template layouts, and combining Grid with Flexbox. Stay tuned!


Follow Me on LinkedIn-

Ridoy Hasan

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

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

Googleフォント変数フォント Googleフォント変数フォント Apr 09, 2025 am 10:42 AM

Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? Apr 05, 2025 pm 11:24 PM

要素の数が固定されていない場合、CSSを介して指定されたクラス名の最初の子要素を選択する方法。 HTML構造を処理するとき、あなたはしばしば異なる要素に遭遇します...

HTMLデータ属性ガイド HTMLデータ属性ガイド Apr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

See all articles