👴🏻 🐁 🔶 CSSグリッドレイアウト。クイックスタート ✋🏻 🍡 👍🏻

エントリー

みなさんこんにちは。ほとんどのブラウザがアップデートをリリースしたため、2017年2月から3月はHTMLとCSSを扱う多くの人に記憶されていました。その中にはCSSのアップデートもありました。これで、 Firefox 52 、 Chrome 57 、 Opera 44 、 Safari 10.1のブラウザーで、フラグなしでCSSグリッドレイアウト仕様を使用できます。どのブラウザが残されているか、推測できると思います。より正確には、古いバージョンの仕様をサポートしています。しかし、このブラウザの開発者は、新しい仕様を実装するために可能なすべてを行っています。新しいCSSグリッドレイアウト仕様のサポートの実装は、過去5年間で最も重要なイベントです。この仕様は、ユーザーインターフェイスの開発に対するアプローチを完全に変更します。そしてこれは素晴らしいです。

フレキシブルボックスレイアウトを使用しています

「やめて、フレックスボックスを使っています。なぜ他のグリッドが必要なのですか？」質問は適切です。 CSSグリッドはFlexboxを置き換えることはなく、その逆も同様です。最初の違いは、Flexboxは1つの次元でのみ機能することです。したがって、フレックスアイテムはメイン軸または横軸に沿ってしか配置できません。一度に複数の軸にフレックスアイテムを配置することはできません。 CSS Gridを使用すると、2次元空間のレイアウトを操作し、両方の次元でコンテンツを整列できます。 Tab Atkinsが違いを説明する方法が大好きです。

ユーザーインターフェイスの開発における最大の問題の1つは、ブロックの設計、機能、または動作を変更するときに、そのレイアウトを変更する必要があることです（ほとんどの場合）。 CSSグリッドを使用すると、HTML自体を変更せずにグリッド要素の場所を変更できます。以下は、FlexboxおよびCSSグリッドでの簡単なマークアップの例です。

主な用語

CSSグリッドの使用を開始する前に、基本的な用語を理解する必要があります。これらの用語に基づいて、仕様全体が構築されます。

グリッドコンテナは、コンテナグリッドスペースをグリッド要素を配置できるグリッド領域に分割する、交差する水平および垂直グリッド線のセットです。グリッドコンテナ内には、2組のグリッド線があります。1つは列の軸を定義し、もう1つは行の軸を定義します。

グリッド線は、水平および垂直のグリッドコンテナー分割線です。これらの線は、列または行のどちらかの側にあります。作成者は、この要素の名前または数値インデックスを指定でき、スタイルでさらに使用できます。番号は1から始まります。重要なニュアンスであるこの要素は、リソースで使用される書き込みモードの影響を受けやすくなっています。たとえば、アラビア語または書き込みモードが右から左のその他の言語を使用する場合、行番号は右側から始まります。

グリッドトラックは、垂直または水平の2つの隣接するグリッド線の間のスペースです。

グリッドセルは、グリッド要素を配置するときに参照できるグリッドコンテナの最小の分割できない単位です。グリッド行とグリッド列の交点に形成されます。

グリッド領域は、1つ以上のグリッド要素を配置できるグリッドコンテナー内のスペースです。この要素は、1つ以上のグリッドセルで構成されます。

各要素は互いに密接に関連しており、グリッドコンテナーの特定の部分を担当します。

最初のCSSグリッドレイアウト

基本的な用語を理解しました。最初のグリッドレイアウトを実行します。複雑なことはなく、基本に対処するために3列に3行のシンプルなレイアウトがあります。以下に例を示します。

この例の最初のバージョンでは、サイズ150px 1fr 150px

3つの列とサイズ50px auto 50px

3つの行をそれぞれ作成します。 1fr

、 auto

などの値に注意してください。これらの値が何であるかを見てみましょう。

1fr

は、この仕様で導入された特別な測定単位です。特定の単位（ px

、 em

、 rem

など）で測定されるわけではないため、 calc()

関数と一緒に使用することはできません。この単位は1より小さくすることはできず、負の値を取ることもできません。 fr

以外のすべての値が計算された後に計算されます。

auto-非常に興味深い動作をし、cなアルゴリズムを使用してサイズを計算します。状況によっては、このユニットはfr

ように動作するように見える場合があります。しかし、これはそうではありません。主な違いは、 fr

が計算される前にauto

が計算されることです。これは覚えておく必要があります。上記の例の2番目と3番目のバリアントからこの動作を確認できます。

列と行をマークするには、次の規則が使用されます。

 grid-template-columns: 150px 1fr auto; grid-template-rows: 50px auto 50px;

エントリの短縮形は次のようになります。

 grid-template: 50px auto 50px / 150px 1fr auto;

典型的なグリッドパターン

よく知っている簡単なテンプレートを作成しましょう。複雑なことは何もありません。テンプレートは次のタグで構成されます： header

、 nav

、 aside

、 article

、 footer

。インターネットリソースの大半はこのテンプレートを使用しています。このような単純なテンプレートであっても、次の問題が観察されることを知ってください。「私はデザイナーです。私はそれを望んでいます。私は開発者です、できません。」 CSSグリッドレイアウトの出現により、このような問題はゼロになる傾向があります。

この例では、いくつかのCSSグリッドレイアウトプロパティを紹介します。最初のgrid-template-areas

。特定のグリッド要素に関連付けられていない名前付きコンテナグリッド領域を作成するために使用されます。構文は非常に便利で、どのテンプレートが出力されるかすぐにわかります。 2番目のプロパティはgrid-area

です。コンテナグリッドの子要素に使用されます。グリッド要素を配置する名前付き領域を示します。

最初のオプションgrid-template-areas

見てみましょう：

 grid-template-areas: "header header" "nav main" "footer ."

1つ以上の連続した文字.

（ドット）は特に重要です。このシンボルが使用されている場合、ブラウザはそれをゼロトークンとしてレンダリングします。これは、次のことを意味します。その場所では、名前付きコンテナグリッド領域は作成されず、グリッド要素はその中に配置できません。

一部の子グリッド要素にgrid-area

プロパティを指定しなかった場合、ブラウザはそのような要素を自動的に配布します。この動作は、最後のオプション、上記の例から見ることができます。

便利なリンク

結論の代わりに

この記事では、氷山のCSSグリッドレイアウトのほんの一部に注目しました。すべてのブラウザがフラグの後ろでそれをサポートしたとき、私はCSSグリッドレイアウトに注意を払い始めました。このテキストは、この仕様での作業の印象を伝えることができません。 CSSグリッドを使用してどのようなことができるかを信じるのが難しい場合があります。これは、すべてのパターンのギャップです。そして、私はそれが好きです。

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

最後に、さまざまな名前の領域にグリッド要素が任意に表示される例を追加します。

以上です。ご清聴ありがとうございました。最後まで読んでくれた人、ありがとう。

CSSグリッドレイアウト。 クイックスタート