グリッドの学習のための5つのヒント

When it comes to structuring your webpage using HTML and CSS, the most commonly used instruments are Flexbox and Grid. This week, my course has been covering Grid in a bit more detail, and I've had a chance to hear several points of confusion among those learning it for the first time, so rather than step you through how to implement Grid, I've decided to drop five tips for understanding it better, which will help you wrap your head around this effective and important concept.

For what it's worth, if you do want a step-by-step guide, I can highly recommend A Complete Guide to Grid . 私は私がグリッドで働いているたびにタブでこれを開いたままに保つので、私は働くために速い参照を持っています、しかし、あなたがそれを使う最初の数回は多分セクションによってそれを通って行かなければなりません.あなたは既にグリッドに精通しているし、'スパン'プロパティでの練習のビットを取得したい場合は、試してみてくださいthis fun CSS Grid game where you use Grid properties to water a garden .
私たちがそれをカバーして、すでにあなたのベルトの下で2つの資源を得た今、あなたは格子について理解する必要があるものを見ましょう:

Grid is used to structure an entire page

What properties apply to containers, and what properties apply to inner elements

Grid works in two directions, Flexbox works in one

You can name Grid areas to make styling easier

It is common practice to use Flexboxes within Grid

...プラス私はbonus tip 最後にあなたのコードを読みやすく、美しく、あなたのサイトを訪問するすべての人に便利に保つ.
これらのグリッドのヒントを理解することができますし、ページの構造をガイドするためにそれらを使用する場合は、はるかに簡単にあなたのページを構造化を見つけるでしょう、あなたのコードは、長期的にクリーンで、より保守可能になります.

1 .グリッドがページ全体を構成するのに使われることを理解する

グリッドの主な使用は、ページ全体の構造です.グリッド(またはFlexbox)の出現の前に、ページの構造は完全にHTMLを使用して達成されなければなりません.このようにコーダーはどのようにme as a little girl learning HTML in the 1990s 恋するiframe and table 要素は、ウェブサイトの構造とフォームを与えるいくつかの方法の1つを表して以来.

今、あなたはきちんとした構造にあなたの要素を注文することができますこの素晴らしいツールを持っている.自分を非常に幸運を考慮!
グリッドは、個々の要素を配置することができますが、それを使用する最善の方法は、全体のページを構造化することです.以下にその方法の例を示します.

グリッドでは、これは3行の6つのセルグリッドと2つのカラムであり、ヘッダーとフッターが2列にまたがっています.

グリッドを使用することで、この構造を確保することができますし、何もページ上でシフトすることを知ることができます.
Back to Top

2 .容器に何が適用されているか、そして、内部要素にどのようなものが適用されるかを明確にする

グリッドを学習するときに最も一般的な初心者の問題の一つは、グリッドコンテナとグリッドの要素にどのようなプロパティが適用されるかについて混乱している.以下にいくつかの簡単なガイドラインを示します.

display: grid グリッドコンテナにのみ適用されます

サイトに適用されるすべてのグリッドプロパティは、コンテナに配置する必要があります

特定の箱だけに適用される何か-self , or grid-column/grid-row ) 個々のグリッド要素スタイルに適用されます

Back to Top

グリッドは2方向に働く

フレックスボックスとグリッドを区別するのは新人として混乱することができます.モバイルデザインがますます優先順位付けされていることによって、Flexboxがしばしば全体的なページ構造のために使われるというのは本当です、なぜ、グリッドは存在しますか?違いは何ですか.
簡単に言えば、Flexboxは1つの方向(行または列のいずれか)で動作し、Flexibox行を埋めるために1つ以上の要素を必要とする場合は、幅またはflex-basis 各要素に対して.
グリッドでは、構造の幅と高さの仕様は、個々の要素ではなく、コンテナスタイルの一部として行われます.その意味では、あなたのページ構造の明確な概要を持っている方がずっと簡単です.例えば、

#container {
   display: grid;
   grid-template-columns: 150px auto 300px;
   grid-template-rows: 50px auto 50px;
}

ここでは、列の幅が設定されている:左に150 px、右側に300 px、センタースペースは何が残っている記入します.同様に、行も設定されている:上部に50 px、下部に50 px、中央に残っているものを記入します.
Flexboxでこれと同じ効果を得るには、4つのコンテナ(例えば、1つのカラムコンテナと3つの個々のflexbox行)を必要とするか、またはflex-wrap 特定のブロックサイジングと組み合わせて.これは非常に厄介な取得することができますグリッドを使用すると、このような構造の後に多くの時間を節約することができます.
単純に、グリッドの2つの方向に動作し、基本的な構造は、コンテナの要素で行われますが、フレックスボックスは一方向にのみ動作し、それを超えて任意の構造は、個々の要素に実装する必要があります.

スタイリングを簡単にするためにグリッド領域を指定できます

グリッドは、構造を参照してくださいに簡単にポイントに展開するには、グリッド領域の名前を指定することができますグリッドのように、それはあなたのCSSの特定のグリッド領域をターゲットに簡単になります.
以下に見た構造の例を示します.

#container {
   display: grid;
   grid-template-areas: 
      "header header"
      "sidebar main"
      "footer footer"
}

あなたのページを見ることなく、あなたは既にあなたが使用しているあなたのCSSで見ることができます.要素を対応するグリッド領域に接続するにはgrid-area プロパティと単にそのセクションを与えた名前を使用します.
例えば、

header {
   grid-area: header;
}

footer {
    grid-area: footer;
}

ご覧のように、行と列の行を使用するよりも読みやすくなります.
Back to Top

グリッド内でflexboxを使用するのは一般的な慣習である

GridとFlexboxの違いについてのすべての議論で、あなたは2つが混合してはならないと思うように誘惑されるかもしれません.これは絶対にそうではない!格子構造の範囲内でflexboxesを使用することは、一般的な実行である.
我々の以前の例を取ると、ヘッダーとフッターはそれぞれ、flex-direction: row 本体とサイドバーは、flex-direction: column プロパティ.それがどのように見えるかについて見ましょう.そして、ページの各々のセクションの中で屈曲方向を示す青い矢を使用します:

また、当社の個々の主なコンテンツセクションでは、Flexboxflex-direction: row イメージとテキストの組み合わせを配置します.ここで、赤い矢印は、それらのflexboxesを示します:

Back to Top

ボーナスチップ：あなたはまだグリッドでセマンティックHTML要素を使用する必要があります

ヒント4を見るとき、あなたはスタイリングをより簡単にするためにグリッド領域を指定することができます<main> , <sidebar> , <nav> , グリッド領域名にかかわらず意味要素を使用するのはまだ良い考えです.それは、スクリーン読者のようなシステムが、実際には、視力障害のある人々のための構造指針としてグリッドスタイリングを尋問していないからである.この種の支援は、ページの実際のHTMLスケルトンからのみレンダリングできます.
それに加えて、あなたのコードを振り返って(または他の人がそれを確認して)、ときにだけではなく、単純に海の海に注視するのではなく、意味のHTML要素を使用して起こっているのための'感じ'を得ることははるかに簡単です<div> s.
だからあなたのグリッド構造に関係なく、意味のHTMLタグを使用してください!
Back to Top