🕴🏿 📈 👛 CSSグリッドは誰にとっても明確です 🥔 💢 👂

グリッドとは何ですか？

グリッドは、水平線と垂直線の重なり合うセットです。1つのセットは列を定義し、もう1つのセットは行を定義します。行と列に応じて、アイテムをグリッドに配置できます。

ブラウザのサポート

ブラウザのサポートは2020年に94％に達します

グリッドコンテナ

要素でdisplay：gridまたはdisplay：inline-gridを宣言して、グリッドコンテナを作成します。これを行うと、この要素の直接の子はすべてグリッドアイテムになります。

<body>
 <div class="row">
  <div class="row__item header">
   <h1>Header</h1>
  </div>
  <div class="row__item nav">
   <h1>Navbar</h1>
  </div>
  <div class="row__item article">
   <h1>Article</h1>
  </div>
  <div class="row__item ads">
   <h1>Ads</h1>
  </div>
 </div>
</body>

.row {
 display: grid;
 margin: auto;
 grid-template-rows: 60px 1fr ;
 grid-template-columns: 20% 1fr 15%;
 grid-gap: 10px;
 width: 1000px;
 height: 1000px;
 justify-items: center;
 justify-content: space-between;
 grid-template-areas:
 "header header header"
 "nav article ads"; 
}

grid-template-rowsは、グリッド行関数の行名とサイズ変更パスを定義するCSSプロパティです。

CSSプロパティgrid-rowは、要素がグリッドレイアウトのどの行から開始するか、要素が何行を占めるか、または要素がグリッドレイアウトのどの行で終了するかを決定します。これは、grid-row-startプロパティとgrid-row-endプロパティの省略形のプロパティです。

CSSプロパティは、grid-gapの省略形性であるgrid-row-gapとgrid-column-gap、それは、グリッドの行と列との間の溝を画定します。

このプロパティgrid-template-areasは、grid-areaプロパティを使用して設定されたエリア名を参照することにより、グリッドテンプレートを定義します。

エリア名を繰り返すと、コンテンツはそれらのセルにまたがります。ドットは空のセルを意味します。構文自体は、グリッド構造の視覚化を提供します。

プロパティを使用してgrid-area、これらの各領域に独自の名前を割り当てることができます。エリアに名前を付けると、まだレイアウトが作成されませんが、使用できるエリアに名前を付けることができます。

.header{
grid-area: header;
}
.nav{
grid-area: nav;
}
.article{
grid-area: article;
}
.ads{
grid-area: ads;
}

CSSグリッドを使用してサイトテンプレートを作成します。

テンプレートの変更

のグリッド領域を再割り当てするだけで、テンプレートを変更できますgrid-template-areas。

したがって、これに変更すると、次のようになります。

grid-template-areas:
 "nav header header"
 "nav article ads"; 
}

その結果、次のテンプレートが得られます。

メディアクエリを使用したグリッド

グリッドの長所の1つは、まったく異なるテンプレートを数秒で作成できることです。

これにより、CSSグリッドはメディアクエリに最適です。ASCIIグラフィックで値を再割り当てし、結果を最終的なメディアクエリでラップするだけです。

@media all and (max-width: 575px) {
.row {
grid-template-areas:
"header"
"article"
"ads"
"nav";
grid-template-rows: 80px 1fr 70px 1fr ;
grid-template-columns: 1fr;
}
}

その結果、次の

ようになります。したがって、重要なのは、プロパティの値を再割り当てすることですgrid-template-areas。

結論

この記事では、CSSグリッドレイアウトの氷山の一角について説明しました。CSSグリッドで何ができるのか信じられないことがあります。これはすべてのパターンの中断です。そして、私はそれが大好きです。

この仕様に注意を払い、時間をかけて勉強することをお勧めします。私を信じてください、将来これは間違いなく便利になるでしょう、そしてあなたがReact、Angular、Vue（あなた自身を挿入してください）で書くかどうかは関係ありません。グリッドは長い間ここにあります。

CSSグリッドは誰にとっても明確です