ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS グリッドは聖杯を構築しますlayout_html/css_WEB-ITnose
CSS グリッドは聖杯を構築しますlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:21:361421ブラウズ
CSS グリッド レイアウト モジュール、まだコンパイラー ドラフト段階ですが、完成間近です。一部のブラウザでテストし、潜在的なバグを検出できるようになりました。
CSS グリッド レイアウト モジュールに関するその他のチュートリアルについては、ここをクリックして読むことができます。
CSS グリッド レイアウトは、特に Flexbox に比べて非常に複雑です。 17 の新しいプロパティがあり、CSS の記述方法に多くの新しい概念が導入されています。頭から離れなかったこれらの新しい仕様をどのように使用するかを試すために、新しい仕様がどのように機能するかを試すために聖杯レイアウトを作成することにしました。
聖杯レイアウトとは何ですか?
Holy Grail レイアウトは、ヘッダー、フッター、および左右 2 つのサイドバーを備えたメイン コンテンツ領域を含む Web ページ レイアウトです。そのレイアウトは次のルールに従います:
固定幅サイドバー- と
- アダプティブメインコンテンツエリアを備えた 中央の列は、 タグ内で2つのサイドバーよりも先に
- 表示される必要があります(ただし、ページの先頭には)。 3 つの列に何が含まれているかに関係なく、それらはすべて 同じ高さである必要があります
- フッターは、コンテンツがビューポートの高さを満たしていない場合でも、 ブラウザのビューポートの一番下にある必要があります
- レイアウトはレスポンシブである必要があります 、小さなウィンドウでは、すべてのパーツが 1 つの列に表示される必要があります
- ハックを使用せずに CSS でこれを実現するのは難しいことは誰もが知っています。
以下は、CSS グリッド レイアウトを使用して私が思いついたソリューションです。まず、マークアップです --
<body class="hg"> <header class="hg__header">Title</header> <main class="hg__main">Content</main> <aside class="hg__left">Menu</aside> <aside class="hg__right">Ads</aside> <footer class="hg__footer">Footer</footer></body>
CSS スタイルは、わずか 31 行のコードです:
.hg__header { grid-area: header;}.hg__footer { grid-area: footer;}.hg__main { grid-area: main;}.hg__left { grid-area: navigation;}.hg__right { grid-area: ads;}.hg { display: grid; grid-template-areas: "header header header" "navigation main ads" "footer footer footer"; grid-template-columns: 150px 1fr 150px; grid-template-rows: 100px 1fr 30px; min-height: 100vh;}@media screen and (max-width: 600px) { .hg { grid-template-areas: "header" "navigation" "main" "ads" "footer"; grid-template-columns: 100%; grid-template-rows: 100px 50px 1fr 50px 30px; }} 詳しく見てみましょう
前に述べたように、CSS グリッド レイアウトは非常に複雑になる場合があります。ただし、このレイアウトを作成するために使用したのは、17 個の新しいプロパティのうち 4 つだけです:
Grid-area
- Grid-template-areas
- Grid-template-columns
- Grid-template-rows
- これらの CSS を使用グリッド プロパティを使用した聖杯レイアウトの作成は、5 つのステップに分類できます。
最初に行うことは、グリッドの作成時に参照できるグリッド領域、つまりエイリアスを定義することです。ここで使用されるのは、grid-area 属性です。
.hg__header { grid-area: header;}.hg__footer { grid-area: footer;}.hg__main { grid-area: main;}.hg__left { grid-area: navigation;}.hg__right { grid-area: ads;}
次に、grid-template-areas 属性を使用すると、本当に直感的な方法でグリッドのレイアウトを指定できます。 Grid-template-areas プロパティは、スペースで区切られた文字列を受け入れます。各文字列は行を表し、各文字列を使用すると、グリッド領域の値のスペースで区切られたリストを取得できます。各値はグリッド領域の列を定義します。したがって、2 列の範囲にまたがる場合は、それを 2 回定義する必要があります。 聖杯レイアウトには 3 列 3 行があります。ヘッダー行とフッター行は 3 列にまたがり、その他の行は 1 列にまたがります。
.hg { display: grid; grid-template-areas: "header header header" "navigation main ads" "footer footer footer";} このタグを使用すると、次の結果が得られます。
列幅を定義する
次に、列の幅を定義します。ここでは、grid-template-columns プロパティを使用して列の幅を定義します。このプロパティは、スペースで区切られた幅のリストを受け入れます。各値はグリッド内の列を表します。レイアウトには 3 つの列があるため、3 つの幅を指定できます:
grid-template-columns: [column 1 width] [column 2 width] [column 3 width];
Holy Grail レイアウトでは、2 つのサイドバーの幅を 150px に設定したいと思います。 rreee
中央の列については、残りのスペースをすべて占めるようにします。ここでは新しい単位 fr を使用できます。この単位は、グリッド内に残っている合計スペースを表します。この例では、これはグリッドの幅から 300px (両方のサイドバーの幅) を引いた値を表します。
.hg { grid-template-columns: 150px [column 2 width] 150px;} グリッド列を設定した後のレイアウトは次のようになります -
行の高さの定義
次に、行の高さを定義する必要があります。 Grid-template-columns プロパティを使用して列幅を定義する方法と同様に、grid-template-rows プロパティを使用して行の高さを定義します。このプロパティは、スペースで区切られた行の高さのリストも受け入れます。同じ行に記述することもできますが、より明確かつ直感的にするために、1 行に 1 つの値を記述すると思います。
.hg { grid-template-columns: 150px 1fr 150px;}
つまり、レイアウトのヘッダーの高さは 100 ピクセル、フッターの高さは 30 ピクセルで、中央の行 (メイン コンテンツと 2 つのサイドバー) が .hg 要素内の残りの空きスペースを占めます。
フッターの配置
Holy Grail レイアウトでは、ページのコンテンツが非常にまばらな場合でも、フッターを常にビューポートの下部に配置する必要があります。これを実現するには、.hg 要素でビューポートの最小高さを設定します。
.hg { grid-template-rows: 100px 1fr 30px;}
.hg 要素の残りのスペースを占めるように中央の列の幅と高さを設定しているため、画面全体に収まります。
レスポンシブ
最後に、レイアウトをレスポンシブにしたいと思います。小型のデバイスでは、すべてのグリッド項目が 1 つの列に順番に表示される必要があります。これを行うには、前の 3 つのプロパティ、grid-template-areas、grid-template-columns、grid-template-rows を再定義する必要があります
まず、すべてのグリッド項目を特定の順序で列に表示する必要があります。 :
@media screen and (max-width: 600px) { .hg { grid-template-areas: "header" "navigation" "main" "ads" "footer"; }}
接下来，我们想要所有的网格项跨越整个宽度:
@media screen and (max-width: 600px) { .hg { grid-template-columns: 100%; }} 最后，我们需要重置每个行的高度。除了 main 之外的所有行都有一个已定义的高度:
@media screen and (max-width: 600px) { .hg { grid-template-rows: 100px /* Header */ 50px /* Navigation */ 1fr /* Main Content */ 50px /* Ads */ 30px; /* Footer */ }}
就是这样！你可以看看 这里的演示 以及 源码 (nb:你可能需要在浏览器中启用网络功能才可以看到)。
浏览器支持
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。