ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML チュートリアル: グリッドにグリッドレイアウトを使用する方法アダプティブグリッドレイアウト

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

王林オリジナル: 2023-10-27 18:28:41793ブラウズ

HTML チュートリアル: グリッドアダプティブグリッドレイアウトにグリッドレイアウトを使用する方法、特定のコード例が必要です

はじめに:
インターネット、Web の発展に伴い、ページレイアウトの重要性がますます高まっています。テーブルやフローティングレイアウトの使用など、従来の Web ページレイアウト方法では、多くの場合、適応効果を実現するために多くのコードと調整が必要になります。 CSS3 で導入されたグリッドレイアウトは、グリッド適応グリッドレイアウトを構築するためのより簡潔かつ柔軟な方法を提供します。この記事では、グリッドレイアウトの基本概念と実際のアプリケーションを紹介し、具体的なコード例を示します。

グリッドレイアウトの概要
グリッドレイアウトは、CSS3 の新しいグリッドレイアウトシステムであり、Web ページのコンテンツを行と列に分割してグリッドレイアウトを作成できます。グリッドレイアウトは、グリッドコンテナとグリッドアイテムの 2 つの部分で実装できます。グリッドコンテナはグリッドアイテムを含む親要素であり、グリッドアイテムはグリッドコンテナの下の子要素です。
グリッドコンテナーの作成
まず、要素をグリッドコンテナーとして定義する必要があります。 HTML では、<div> 要素を使用してグリッドコンテナーとして機能できます。以下に示すように: <pre class='brush:html;toolbar:false;'><div class="container">  <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> </div></pre><ol start="3"><li>グリッドレイアウトの定義<br>グリッドコンテナーの CSS プロパティを設定することで、<code>display:grid;、グリッドグリッドとして定義できます。レイアウト。さらに、grid-template-columns プロパティと grid-template-rows プロパティを使用して、グリッドの列数と行数を指定することもできます。たとえば、次のコードは、グリッドコンテナーを 3 列 2 行のグリッドレイアウトとして定義します。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

グリッド項目の位置とサイズを設定します
CSS プロパティ grid-column および grid-row## を設定することで、グリッド項目 # を使用すると、グリッドレイアウト内の各グリッド項目の位置を指定できます。たとえば、次のコードは、グリッドアイテム 1 を 1 列目の 1 行目に、グリッドアイテム 2 を 2 列目の 1 行目に、グリッドアイテム 3 を 3 列目の 2 行目に、そしてグリッドアイテム 4 を 3 列目の 1 行目に配置します。最初の列の 2 行目。

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 3;
  grid-row: 2;
}

.item4 {
  grid-column: 1;
  grid-row: 2;
}

グリッドレイアウトでは、グリッド項目のサイズと位置を適応的に調整できます。
grid-template-areas 属性を使用して、グリッドレイアウト内の各グリッド項目の位置を指定し、. 文字を使用してスペースを表すことができます。たとえば、次のコードは、グリッドコンテナーを 2 列 2 行のグリッドレイアウトとして定義し、各グリッド項目を異なる位置に配置します。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: sidebar;
}

.item3 {
  grid-area: main;
}

グリッドレイアウトでは、レスポンシブグリッドレイアウトを簡単に実装することもできます。 CSS メディアクエリを使用すると、さまざまな画面サイズやデバイスの種類に応じてグリッドレイアウトのスタイルを調整できます。たとえば、次のコードは、ウィンドウが 600 ピクセルより小さい場合、グリッドレイアウトを 1 列のレイアウトに変更します。

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

@media screen and (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

結論:

グリッドレイアウトは、グリッド適応グリッドレイアウトを実装するための簡潔かつ柔軟な方法を提供します。グリッドコンテナーとグリッドアイテムを使用すると、複雑な Web レイアウトを簡単に作成し、適応性と応答性の高い機能を使用して、さまざまな画面サイズやデバイスタイプに適応させることができます。この記事が、グリッドレイアウトを理解して適用し、より柔軟で美しい Web ページレイアウトを作成するのに役立つことを願っています。

参照コード:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }

    .item1 {
      grid-column: 1;
      grid-row: 1;
      background-color: red;
    }

    .item2 {
      grid-column: 2;
      grid-row: 1;
      background-color: green;
    }

    .item3 {
      grid-column: 1 / span 2;
      grid-row: 2;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
</body>
</html>

CSS ファイル (style.css):

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.item1 {
  grid-column: 1;
  grid-row: 1;
  background-color: red;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
  background-color: green;
}

.item3 {
  grid-column: 1 / span 2;
  grid-row: 2;
  background-color: blue;
}

上記は、グリッド適応グリッドレイアウトのグリッドレイアウトの使用方法に関する HTML チュートリアルです。それが役に立てば幸い。グリッドレイアウトを柔軟に使用すると、Web ページに優れたユーザーエクスペリエンスと美しさをもたらすことができることに注意してください。グリッドレイアウトを使ってみましょう！

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

css css3 html display column

声明：

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

前の記事：HTML チュートリアル: Flexbox を使用して等高さ、等幅、等間隔のレイアウトを適応させる方法次の記事：HTML チュートリアル: Flexbox を使用して等高さ、等幅、等間隔のレイアウトを適応させる方法

続きを見る

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

関連記事

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