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

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

PHPzオリジナル: 2023-10-21 11:43:491467ブラウズ

過去のテーブルレイアウトから現在の Flex レイアウトに至るまで、CSS はページレイアウトにおいて開発、進化してきました。現在、CSS グリッドレイアウトは強力で柔軟なレイアウト方法になりました。このチュートリアルでは、CSS グリッドレイアウトを使用して、複雑で美しいページレイアウトを作成する方法を学びます。

CSS グリッドレイアウトは、ページを複数の行と列に分割し、これらの行と列にコンテンツを配置できる 2 次元のグリッドシステムです。グリッドレイアウトはまだ比較的新しい機能ですが、最新のブラウザーではすでにサポートされており、実用的なアプリケーションで広く使用されています。

始める前に、グリッドレイアウトの基本的な用語と概念を理解する必要があります。グリッドレイアウトは、次の主要コンポーネントで構成されます。

Container (コンテナ): すべてのグリッドアイテムの親要素が含まれます。要素の display プロパティを grid または inline-grid に設定して、グリッドレイアウトを有効にします。
行: グリッドレイアウトの水平部分。コンテナの grid-template-rows を設定することで、行のサイズと数を定義できます。
列: グリッドレイアウトの垂直部分。コンテナの grid-template-columns を設定することで、列のサイズと数を定義できます。
グリッド項目: グリッドに配置される要素。コンテナ内に直接書き込まれた要素は、自動的にグリッドアイテムとして扱われます。

ヘッダー、サイドバー、メインコンテンツ領域を備えた単純なグリッドレイアウトを作成すると仮定して、実際に見てみましょう。

HTML 構造の作成:

<!DOCTYPE html>
<html>
<head>
 <title>Grid布局教程</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="container">
     <header>头部</header>
     <aside>侧边栏</aside>
     <main>主要内容区域</main>
 </div>
</body>
</html>

CSS でのグリッドレイアウトの定義:

.container {
 display: grid;
 grid-template-rows: 100px auto;
 grid-template-columns: 200px 1fr;
 grid-gap: 10px;
}

header {
 grid-row: 1;
 grid-column: 1 / span 2;
 background-color: #f2f2f2;
 padding: 20px;
}

aside {
 grid-row: 2;
 grid-column: 1;
 background-color: #e9e9e9;
 padding: 20px;
}

main {
 grid-row: 2;
 grid-column: 2;
 background-color: #d9d9d9;
 padding: 20px;
}

In In上記のコードでは、最初にコンテナー内にグリッドレイアウトを設定し、2 行と 2 列を定義しました。ヘッダー要素は 1 行目の 2 列を占め、サイドバーとメインコンテンツはそれぞれ 2 行目の 1 列目と 2 列目を占めます。同時に、グリッド項目間の間隔も 10 ピクセルに設定します。

この簡単な例を通して、グリッドレイアウトの威力がわかります。行と列のサイズと数を指定することに加えて、grid-row プロパティと grid-column プロパティを使用してグリッド項目の位置を指定して、レイアウトをより柔軟にすることもできます。。

グリッドレイアウトは、上記の基本的な使用法に加えて、サイズの適応、スペースの自動充填など、より強力な機能も提供します。グリッドレイアウトを詳しく学びマスターしたい方は、grid-template-areas、grid-auto-rows、grid-auto-columns について詳しく学ぶことができます。 およびその他の属性。

このチュートリアルを通じて、ページレイアウトに CSS グリッドレイアウトを使用する方法を予備的に理解し、習得できることを願っています。グリッドレイアウトを柔軟に使用することで、ユニークで美しく応答性の高い Web ページレイアウトを作成できます。 CSSレイアウトを楽しんでください！

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

css html auto display column flex

声明：

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

前の記事：HTML チュートリアル: Flexbox を使用してスケーラブルな高さと幅が等しいレイアウトを実現する方法次の記事：HTML チュートリアル: Flexbox を使用してスケーラブルな高さと幅が等しいレイアウトを実現する方法

続きを見る

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

関連記事

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