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

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

WBOY

リリース： 2023-10-27 08:11:20

オリジナル

1010 人が閲覧しました

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 サイトの他の関連記事を参照してください。