ホームページ >毎日のプログラミング >CSSの知識 >CSSグリッドレイアウトとは
CSSグリッドレイアウトとは
- 藏色散人オリジナル
- 2018-11-12 17:31:136613ブラウズ
この記事では、CSS グリッド レイアウト 、つまり グリッド レイアウト の基礎知識を中心に紹介します。
推奨参考学習:「CSS チュートリアル 」
フロントエンド初心者にとって、CSS グリッド レイアウト の概念は少し馴染みがないかもしれません。実際、それは非常に理解しやすいです。 Web ページのスタイルをレイアウトするために CSS が使用されることは誰もが知っていますが、通常、Web ページの互換性、ボックスのフローティング、配置などのハック実装の問題を最初に考慮する必要があります。CSS グリッド レイアウトとも呼ばれます。この問題を解決するために特別に作成されたモジュールです。
簡単に言えば、CSS Grid Layout は、列 (Column) と行 (Row) を同時に処理できる 2 次元のグリッドベースのレイアウト システムです。の目標は、グリッド設計に基づいてユーザーとのインターフェース方法を変えることです。
以下では、簡単な グリッド レイアウトの例 を通じてグリッド グリッド レイアウトを紹介します。
グリッド レイアウトの簡単なコード例 は次のとおりです。 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid网格布局示例</title>
</head>
<style>
.wrapper {
display: grid;
grid-template-rows: 100px 100px 100px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
.item1{
background: #333333;
}
</style>
<body>
<div class="wrapper">
<div class="item1" style=" background: #745A74;">大导航</div>
<div class="item2" style="background: #CCCC66">2</div>
<div class="item3" style="background: #FFCFCF">3</div>
<div class="item4" style="background: aquamarine">4</div>
<div class="item5" style="background: chartreuse">5</div>
<div class="item6" style="background: darkorange">6</div>
</div>
</body>
</html>効果は次のとおりです: 
上記のコードでは、指定したコンテナに display:grid 属性 を設定して、グリッドの使用を開始します。レイアウト、つまり要素を定義する グリッド コンテナーを作成し、列 (grid-template-columns) と行 (grid-template-rows) のサイズを設定し、子要素を Grid-column によってコンテナーに配置します。そしてグリッド行。
重要なプロパティの紹介:
##grid-template-rows プロパティはグリッド行の寸法に基づいており、グリッド線の名前とサイズ。
grid-template-columns プロパティはグリッド列の寸法に基づいており、グリッド線の名前とグリッド トラックのサイズを定義します。
Grid-column-start プロパティは、行、スパン、または自動を提供することによって、グリッド列内のグリッド項目の開始位置を指定します。この開始位置は、グリッド領域のブロック開始エッジを定義します。
Grid-column-end プロパティは、コントリビューション ライン、スパン、またはなし (自動) をグリッド列に配置することで、グリッド列のグリッド項目の終了を指定します。グリッド位置を指定して、グリッド領域のブロックの終了エッジを指定します。
この記事は、CSS Grid グリッド レイアウトの簡単な基礎知識を紹介するもので、困っている友人に役立つことを願っています。
以上がCSSグリッドレイアウトとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。