ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML を使用して基本的なグリッド レイアウト ページを作成する方法
HTML を使用して基本的なグリッド レイアウト ページを作成する方法
- 王林オリジナル
- 2023-10-21 10:37:411076ブラウズ
HTML を使用して基本的なグリッド レイアウト ページを作成する方法
グリッド レイアウトは一般的で実用的なページ レイアウト方法であり、グリッド分割の形式にすることができます。ページを複数の領域に分割し、領域のサイズと位置を柔軟に調整します。この記事では、HTML を使用して基本的なグリッド レイアウト ページを作成する方法を紹介し、参考となる具体的なコード例を示します。
まず、グリッド レイアウトのルート要素として機能するコンテナ要素を HTML ファイルに設定する必要があります。div または section## です。 # 要素。container など、識別するための ID を与えます。次に、CSS を使用してこのコンテナ要素のスタイルを定義し、グリッド レイアウトを実装します。
<!DOCTYPE html>
<html>
<head>
<title>网格布局示例</title>
<style>
#container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 以相等的比例分成三列 */
grid-gap: 10px; /* 设置行列之间的间隙 */
}
</style>
</head>
<body>
<div id="container">
<!-- 这里可以添加网格中的内容 -->
</div>
</body>
</html>上記のコードでは、display:grid を使用して、container 要素をグリッド レイアウトに設定します。次に、grid-template-columns 属性でグリッドの列数と幅を指定します。repeat(3, 1fr) を使用してグリッドを 3 つの列に分割します。均等に均等に分割されます。
div などの要素を各グリッドのコンテナとして使用し、対応するスタイルをそれらに追加できます。
<div id="container">
<div class="grid-item">
<img src="image1.jpg" alt="图片1">
<h3>标题1</h3>
</div>
<div class="grid-item">
<img src="image2.jpg" alt="图片2">
<h3>标题2</h3>
</div>
<div class="grid-item">
<img src="image3.jpg" alt="图片3">
<h3>标题3</h3>
</div>
</div>列数と幅の指定に加えて、他の値も使用できます。グリッドを調整するためのプロパティ grid-gap 属性などのグリッド レイアウト スタイルは、行と列の間のギャップ サイズを設定するために使用されます。
以上がHTML を使用して基本的なグリッド レイアウト ページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。