CSS グリッド レイアウト モジュール、まだコンパイラー ドラフト段階ですが、完成間近です。一部のブラウザでテストし、潜在的なバグを検出できるようになりました。
CSS グリッド レイアウト モジュールに関するその他のチュートリアルについては、ここをクリックして読むことができます。
CSS グリッド レイアウトは、特に Flexbox に比べて非常に複雑です。 17 の新しいプロパティがあり、CSS の記述方法に多くの新しい概念が導入されています。頭から離れなかったこれらの新しい仕様をどのように使用するかを試すために、新しい仕様がどのように機能するかを試すために聖杯レイアウトを作成することにしました。
Holy Grail レイアウトは、ヘッダー、フッター、および左右 2 つのサイドバーを備えたメイン コンテンツ領域を含む Web ページ レイアウトです。そのレイアウトは次のルールに従います:
固定幅サイドバー以下は、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>
.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-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;}聖杯レイアウトには 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];
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;}
フッターの配置
Holy Grail レイアウトでは、ページのコンテンツが非常にまばらな場合でも、フッターを常にビューポートの下部に配置する必要があります。これを実現するには、.hg 要素でビューポートの最小高さを設定します。
.hg { grid-template-rows: 100px 1fr 30px;}
レスポンシブ
最後に、レイアウトをレスポンシブにしたいと思います。小型のデバイスでは、すべてのグリッド項目が 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:你可能需要在浏览器中启用网络功能才可以看到)。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
