ホームページ > 記事 > ウェブフロントエンド > HTML チュートリアル: ページ レイアウトにグリッド レイアウトを使用する方法
HTML チュートリアル: ページ レイアウトにグリッド レイアウトを使用する方法
- PHPzオリジナル
- 2023-10-21 11:43:491479ブラウズ
HTML チュートリアル: ページ レイアウトにグリッド レイアウトを使用する方法
過去のテーブル レイアウトから現在の 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 サイトの他の関連記事を参照してください。