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 16, 2025 am 11:20 AM

ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます

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

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

毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 毎週のプラットフォームニュース:HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 Apr 17, 2025 am 10:55 AM

今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します

HTMLダイアログ要素を使用したいくつかの実践 HTMLダイアログ要素を使用したいくつかの実践 Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

ペーパーフォーム ペーパーフォーム Apr 16, 2025 am 11:24 AM

購入またはビルドは、テクノロジーの古典的な議論です。自分で物を構築することは、あなたのクレジットカードの請求書にはラインアイテムがないため、安価に感じるかもしれませんが

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? 「ポッドキャストにサブスクライブ」リンクはどこにすべきですか? Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合:

独自の非JavaScriptベースの分析をホストするためのオプション 独自の非JavaScriptベースの分析をホストするためのオプション Apr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター 毎週のプラットフォームニュース:テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター Apr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

See all articles