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

王林
リリース: 2023-10-27 18:28:41
オリジナル
752 人が閲覧しました

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

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

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

  1. グリッド レイアウトの概要
    グリッド レイアウトは、CSS3 の新しいグリッド レイアウト システムであり、Web ページのコンテンツを行と列に分割してグリッド レイアウトを作成できます。グリッド レイアウトは、グリッド コンテナとグリッド アイテムの 2 つの部分で実装できます。グリッド コンテナはグリッド アイテムを含む親要素であり、グリッド アイテムはグリッド コンテナの下の子要素です。
  2. グリッド コンテナーの作成
    まず、要素をグリッド コンテナーとして定義する必要があります。 HTML では、<div> 要素を使用してグリッド コンテナーとして機能できます。以下に示すように: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;div class=&quot;container&quot;&gt; &lt;!-- 网格项 --&gt; &lt;div class=&quot;item1&quot;&gt;1&lt;/div&gt; &lt;div class=&quot;item2&quot;&gt;2&lt;/div&gt; &lt;div class=&quot;item3&quot;&gt;3&lt;/div&gt; &lt;div class=&quot;item4&quot;&gt;4&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><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;
}
ログイン後にコピー
  1. グリッド項目の位置とサイズを設定します
    CSS プロパティ grid-column および grid-row## を設定することで、グリッド項目 # を使用すると、グリッド レイアウト内の各グリッド項目の位置を指定できます。たとえば、次のコードは、グリッド アイテム 1 を 1 列目の 1 行目に、グリッド アイテム 2 を 2 列目の 1 行目に、グリッド アイテム 3 を 3 列目の 2 行目に、そしてグリッド アイテム 4 を 3 列目の 1 行目に配置します。最初の列の 2 行目。
  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;
    }
    ログイン後にコピー
    アダプティブ グリッド レイアウト
  1. グリッド レイアウトでは、グリッド項目のサイズと位置を適応的に調整できます。
    grid-template-areas 属性を使用して、グリッド レイアウト内の各グリッド項目の位置を指定し、. 文字を使用してスペースを表すことができます。たとえば、次のコードは、グリッド コンテナーを 2 列 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;
    }
    ログイン後にコピー
    レスポンシブ グリッド レイアウト
  1. グリッド レイアウトでは、レスポンシブ グリッド レイアウトを簡単に実装することもできます。 CSS メディア クエリを使用すると、さまざまな画面サイズやデバイスの種類に応じてグリッド レイアウトのスタイルを調整できます。たとえば、次のコードは、ウィンドウが 600 ピクセルより小さい場合、グリッド レイアウトを 1 列のレイアウトに変更します。
  2. .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 サイトの他の関連記事を参照してください。

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