HTML チュートリアル: 複数列レイアウトにグリッド レイアウトを使用する方法

HTML チュートリアル: 複数列レイアウトにグリッド レイアウトを使用する方法

グリッド レイアウトは、最新の Web デザインで一般的に使用されるレイアウト方法の 1 つです。ページコンテンツを複数の列と行に分割して、柔軟な複数列レイアウトを実現します。この記事では、グリッド レイアウトを使用して複数列の Web ページ レイアウトを作成する方法を紹介し、具体的なコード例を示します。

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

グリッド レイアウトは、Web コンテンツを複数のグリッド領域に分割できる 2 次元レイアウト システムです。これらのグリッド領域はデザインのニーズに応じて定義および配置できるため、Web ページのレイアウトがより柔軟かつ自由になります。グリッド レイアウトは、グリッド コンテナとグリッド アイテムを設定することでレイアウトを実現し、グリッドの行と列のサイズ、位置、間隔を指定することでレイアウトを調整します。

2. グリッド コンテナの作成

グリッド レイアウトを使用するには、まず HTML ドキュメント内にグリッド コンテナを作成する必要があります。 <div> 要素をグリッド コンテナとして使用し、CSS スタイルを通じてコン​​テナのレイアウトを定義できます。 <p>サンプルコードは以下の通りです: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;div class=&quot;grid-container&quot;&gt; ... 网格项内容 ... &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><p>3. グリッドレイアウトの設定</p><p>スタイルシートでグリッドコンテナの表示属性を指定することでグリッドレイアウトを有効にできます。グリッドとして。グリッド テンプレートを使用して、グリッドの行と列のサイズ、位置、間隔を定義できます。 </p><p>サンプル コードは次のとおりです。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:css;toolbar:false;'>.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */ grid-template-rows: auto; /* 自动调整行高 */ gap: 20px; /* 网格项间距为20px */ }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>上記のコードでは、<code>grid-template-columns でグリッドの列数と各列の幅を指定します。ここでは ## が使用されています。#1fr 単位で、各列の幅が均等に分散されていることを示します。 grid-template-rows はグリッドの行の高さを指定します。行の高さを自動的に調整するには、auto を使用します。 gap はグリッド項目間の間隔を指定します。ここでは 20px に設定します。

<div class="grid-container">
  <div class="grid-item">网格项1</div>
  <div class="grid-item">网格项2</div>
  <div class="grid-item">网格项3</div>
</div>

.grid-item {
  background-color: #f5f5f5;
  padding: 20px;
}

1. grid-column-start および grid-column-end: グリッド項目の列の開始と終了を定義します。位置。
2. grid-row-start および grid-row-end: グリッド項目の行の開始位置と終了位置を定義します。
3. grid-area: グリッド項目の行と列の位置を同時に定義します。
4. justify-self: 列方向のグリッド項目の配置を定義します。
5. align-self: 行方向のグリッド項目の配置を定義します。