ホームページ > 記事 > ウェブフロントエンド > HTML チュートリアル: グリッド フリー レイアウトにグリッド レイアウトを使用する方法
HTML チュートリアル: グリッド フリー レイアウトにグリッド レイアウトを使用する方法
- WBOYオリジナル
- 2023-10-18 08:48:391023ブラウズ
HTML チュートリアル: グリッド フリー レイアウトにグリッド レイアウトを使用する方法。具体的なコード例が必要です。
はじめに:
-
グリッド レイアウトとは何ですか? グリッド レイアウトは、Web ページのレイアウトを行と列に分割し、各「セル」のサイズと位置を指定して Web ページのレイアウトを作成するグリッド システムです。グリッド レイアウトは、列レイアウトやレスポンシブ レイアウトなどの複雑なグリッド レイアウトを簡単に実装できます。 -
HTML でのグリッド レイアウトの使用 HTML でグリッド レイアウトを使用するには、まず CSS でグリッド コンテナーとグリッド アイテムを定義する必要があります。グリッド コンテナーは Web ページのコンテンツを含む部分であり、グリッド アイテムはグリッド コンテナーの子要素です。
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto; /* 定义3列 */
grid-gap: 10px; /* 定义单元格之间的间隔 */
background-color: #f3f3f3;
padding: 10px;
}
.grid-item {
background-color: #ffffff;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Grid布局示例</h1>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html> 上記のコードでは、合計 3 つの列を持つ 6 つのグリッド項目を含むグリッド コンテナーを定義します。各グリッド項目は同じスタイルを持ち、左から右、上から下の順にグリッドを埋めていきます。 - グリッド レイアウトの共通プロパティ
- grid-template-columns: 列の数と幅を定義します。
- grid-template-rows: 行の数と高さを定義します。
- grid-gap: グリッド項目間のギャップを定義します。
- grid-column: グリッド項目がまたがる列を定義します。
- grid-row: グリッド項目がまたがる行を定義します。
- justify-items: 列内のグリッド項目の配置を定義します。
- align-items: 行内のグリッド項目の配置を定義します。
-
グリッド レイアウトのレスポンシブ レイアウト グリッド レイアウトを使用すると、レスポンシブ レイアウトを簡単に実装できます。異なる列幅と行高さを定義し、メディア クエリを使用すると、異なる画面サイズに異なるレイアウトを表示できます。
@media screen and (max-width: 600px) {
.grid-container {
grid-template-columns: auto;
}
} 上記のコードでは、画面幅が 1 の場合にグリッド コンテナーの列数を 1 に変更するメディア クエリを定義しています。 600ピクセル未満のリスト。このように、モバイル デバイスでは、グリッド レイアウトが列レイアウトになります。
結論:
以上がHTML チュートリアル: グリッド フリー レイアウトにグリッド レイアウトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。