HTML チュートリアル: アダプティブ グリッド レイアウトにグリッド レイアウトを使用する方法

WBOY
リリース: 2023-10-27 08:11:20
オリジナル
1030 人が閲覧しました

HTML チュートリアル: アダプティブ グリッド レイアウトにグリッド レイアウトを使用する方法

HTML チュートリアル: アダプティブ グリッド レイアウトにグリッド レイアウトを使用する方法

フロントエンド開発では、Web ページ レイアウトは重要なリンクです。最新の Web ページ レイアウトでは、グリッド レイアウトが非常に人気のある選択肢になっています。さまざまなグリッド レイアウトを迅速かつ柔軟に構築するのに役立ち、適応効果を実現できます。この記事では、アダプティブ グリッド レイアウトにグリッド レイアウトを使用する方法を紹介し、具体的なコード例を示します。

1. グリッド レイアウトの概要

グリッド レイアウトは、Web ページを行と列に分割する機能を提供する CSS のモジュールです。グリッドコンテナとグリッドアイテムを設定することで、アダプティブグリッドレイアウトを実装できます。

グリッド コンテナーは、グリッド レイアウトを使用する最初のステップです。 HTML ドキュメント内の要素をグリッド コンテナーとして選択し、CSS で display:grid を使用してコンテナーがグリッド レイアウトを使用することを指定する必要があります。例:

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

次に、grid-template-columns プロパティと grid-template-rows プロパティを設定して、グリッド コンテナーの行と列を定義できます。 。これら 2 つのプロパティは値のリストを受け入れ、各値はグリッド セルのサイズを表します。例:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px;
}
ログイン後にコピー

上記のコードは、グリッド コンテナーを 2 つの列 (各列はグリッド コンテナーの幅の半分) と 2 つの行 (それぞれ高さ 100 ピクセルと 200 ピクセル) に分割します。

次に、グリッド アイテムをグリッド コンテナーに配置できます。グリッド項目はグリッド コンテナの直接の子要素です。grid-column 属性と grid-row 属性を使用して、グリッド内のグリッド項目の位置を指定できます。例:

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
ログイン後にコピー

上記のコードは、グリッド項目を最初の列位置に配置し、2 列 1 行にまたがります。

2. アダプティブ グリッド レイアウト

グリッド レイアウトを使用すると、アダプティブ グリッド レイアウトを実現できます。つまり、Web ページのサイズに応じてグリッド項目を自動的に調整できます。実際の開発では、異なる画面サイズに異なるレイアウトを表示する必要がある場面に遭遇することがよくあります。グリッド レイアウトはこの要件を十分に満たすことができます。

アダプティブ グリッド レイアウトを実装する場合、minmax 関数を使用して、グリッド コンテナーまたはグリッド アイテムのサイズ範囲を設定できます。この関数は 2 つのパラメータを受け入れます。最初のパラメータは最小値を表し、2 番目のパラメータは最大値を表します。例:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
ログイン後にコピー

上記のコードは、グリッド コンテナーの各列の幅を 200px に設定し、グリッド コンテナーの空白領域を自動的に埋めます。

モバイル デバイスでは、グリッド レイアウトを 1 列に調整する必要がある場合があります。メディア クエリを使用すると、この効果を実現できます。例:

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

上記のコードは、画面幅が 768px 未満の場合、グリッド コンテナーを単一列に調整します。

3. 具体的なコード例

以下は、グリッド レイアウトを使用したアダプティブ グリッド レイアウトの具体的なコード例です:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 20px;
    }
  
    .item {
      background-color: #f2f2f2;
      padding: 20px;
      text-align: center;
    }

    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>
ログイン後にコピー

上記のコードは、グリッド コンテナーを複数の列に分割します。 、各列の幅は 200px で、空いたスペースは自動的に埋められます。画面幅が 768px 未満の場合、グリッド コンテナーは 1 列に調整されます。

概要

グリッド レイアウトは、Web ページ レイアウトを迅速かつ柔軟に構築できる強力なグリッド レイアウト ツールです。グリッド レイアウトを使用すると、適応型グリッド レイアウトを実装でき、Web ページが異なる画面サイズで異なるレイアウトを表示できるようになります。この記事で提供されているコード例を通じて、読者はアダプティブ グリッド レイアウトのグリッド レイアウトをよりよく理解し、使用できるようになると思います。

以上がHTML チュートリアル: アダプティブ グリッド レイアウトにグリッド レイアウトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート