CSSグリッドレイアウトの初心者ガイド

CSSグリッドレイアウトモジュールは、Webサイトの構築方法に革命をもたらしました。過去のトリッキーなハッキングや独創的なソリューションなしで高度なレイアウトを可能にするツールを提供しています。 このグリッドの紹介では、グリッドレイアウトの仕組みの基本を説明します。実際に使用する方法の簡単な例をたくさん見ていきます。

キーテイクアウト

CSSグリッドレイアウトの紹介：この記事は、CSSの強力なレイアウトシステムとしてのCSSグリッドの基本的な理解を提供し、構造化されたコンテンツ配置のために要素を行と列のグリッドフレームワークに変換する方法を説明します。要素をグリッドコンテナに変え、その直接の子供をグリッドアイテムに変えることの基本をカバーしています。

1. グリッド構造とアイテム配置：グリッドテンプレート - コラム、グリッドテンプレート列、グリッドテンプレートエリアなどのプロパティを使用してグリッド構造を定義するなど、CSSグリッドの重要な機能が検討されています。チュートリアルでは、ギャッププロパティの間隔グリッドアイテムを示し、それらを特定の行と列に整理して正確なレイアウトを示します。

CSSグリッドを使用したレスポンシブデザイン：レスポンシブWebデザインのCSSグリッドの適応性が強調表示され、さまざまな画面サイズのグリッドレイアウトを変更するためにメディアクエリを使用する方法を示します。グリッドアイテムの重複やメディアクエリのないレスポンシブレイアウトの作成などの高度な手法についても説明し、最新のWebデザインにおけるCSSグリッドの汎用性を強調しています。

2. グリッドレイアウトを開始
3. グリッドは、コンテンツを配置できる列と行のフレームワークです。 （テーブルのレイアウトのようなものですが、ステロイドに！）
   グリッドを始めることはこれを行うのと同じくらい簡単です：

さて、.container要素の直接の子供はすべて「グリッドアイテム」になります。そもそも、以下のデモに示すように、それらは単一の列の行の束として表示されます。 を参照してください

cssグリッドの基本：表示：sitepoint by sitepoint（@sitepoint）

codepenを参照してください。

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

上記の例には、容器として機能する

要素があります。その中にはいくつかの要素があり、それらがグリッドアイテムになりました：

これまでのところ、表示せずに同じ結果が得られるので、あまり達成していません。グリッド。
さらなる読み取り：

上記のデモでは、コンテナがビューポートの中心です。グリッド付きのセンタリング要素の詳細を読んでください。

グリッドアイテム間のギャップの設定

最初のスペースをGAPプロパティで少し離してみましょう：

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

ペンを参照してください

cssグリッドの基本：sitepoint by sitepoint（@sitepoint）
codepen。

ギャッププロパティは、まもなく表示されるように、要素間のスペースを垂直方向と水平方向に挿入します。 （必要に応じて、異なる水平ギャップと垂直ギャップを設定できます。）

さらなる読み取り：

ギャッププロパティの詳細を読んでください。
グリッド列のセットアップ

現在、「暗黙の」グリッドがあります。つまり、ブラウザは、まだ行や列を指定していないため、グリッドを把握しているだけです。デフォルトでは、1つの列と4行を取得します。グリッドアイテムごとに1つだけです。次に、いくつかの列を指定しましょう：

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
</span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
</span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
</span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>

グリッドテンプレートコラムを使用すると、1FRの幅、または使用可能なスペースの1つの割合を持つ4つの列がそれぞれ4つの列が必要であることを指定しています。 （1FR 1FR 1FR 1FRの代わりに、非常に便利な繰り返し（）関数を使用して繰り返し（4、1FR）を書き込むことができます。

以下に示すように、グリッドアイテムは1つの行にレイアウトされています。 cssグリッドの基本を参照してください：codepenでsitepointによるグリッドテンプレート - コラム（@sitepoint）

さらなる読み取り：

Grid-Template-Columnsの詳細情報。

柔軟な長さ（FR）ユニットの詳細をご覧ください。

gridのrepeat（）関数の使用方法

• グリッドアイテムを列と列に整理する
標準のWebページレイアウトで表示される可能性があるため、グリッドアイテムを行と列に整理しましょう。
• まず、グリッドテンプレート列プロパティを使用して3行を指定します：

上のペンにその線を追加すると、グリッドアイテムがこれらの行と列に適合する方法を指定していないため、まだそれほど多くは発生しません。繰り返しますが、Auto Auto Autoは、repeat（）関数を使用して繰り返し（3、auto）として記述できることに注意してください。）

さらなる読み取り：

グリッドテンプレート列に関する詳細情報。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

gridのrepeat（）関数の使用方法

グリッドにグリッドアイテムを配置する

• ブラウザの開発者ツールは、CSSグリッドレイアウトを理解するのに非常に便利です。これまでコードを検査すると、下の写真のようにグリッドを定義する水平および垂直のグリッド線を見ることができます。

• 5つの垂直グリッドラインと4つの水平グリッドラインがあり、それらはすべて番号が付けられています。これらのグリッドラインを使用して、グリッドアイテムをレイアウトする方法を指定できます。

  最初に要素を4つの列と1つの行に及ぼすように設定しましょう。

  これは、に、番号が番号1のグリッド列線で開始され、番号付きの列線で終了するように指示します。エンドラインは指定されていないため、次の行ラインに至るだけなので、グリッドロー：1はグリッドrow：1 /2に相当します。

  ：

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span><span>}
  </span>

  に似たことをしましょう

  ここでの唯一の違いは、グリッドの行3と4の間にを設定したことです。

  次に、 and

  要素を配置しましょう：

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
  </span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
  </span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
  </span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  結果は下のペンに示されています。

  ペンを参照してください

  cssグリッドの基本：codepenで番号付きの行で番号付きの行でアイテムを配置します。

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span>  <span>gap: 10px;
  </span><span>}
  </span>

  ハッキーなフロート、オーバーフロー、その他の過去の悪夢のない柔軟で応答性の高いレイアウトがあります。グリッドアイテムにコンテンツを追加すると、そのコンテンツが含まれるように拡張され、サイドごとの列の高さは常に等しくなります。 （NoughtiesでCSSを使用している人にとっては、平等な列を達成することは悪夢でした！）
  番号付きグリッドラインについて知っておくべき有用なこと
  

  上の画像をもう一度見ると、下部に沿って垂直線にも負の数字が付けられていることがわかります。各グリッドラインには、正と負の数があります。これには、グリッドラインがたくさんあるときなど、多くの用途があり、必ずしもいくつのグリッドがあるかはわかりません。最後の垂直線には5と-1の両方が番号が付けられているため、グリッドコラムで5つの列すべてに及ぶ

  要素を設定できます。 グリッドにはスパンキーワードもあり、これを使用して要素を指示するために使用できます。

  レイアウトのもう1つのオプションは、グリッドコラム：1 /スパン4を書き込むことです。これは、最初のグリッドラインで開始し、4つの列のすべてにわたってスパンする要素を指示することです。

  上記のペンでこれらのバリエーションを試してみてください。

  さらなる読み取り：

  • グリッドラインの詳細をご覧ください。
  • グリッドラインに番号が付けられる方向は、レイアウトのライティングモードによって影響を受けます。
  grid-columnの詳細をご覧ください。
  グリッド仕様のスパンキーワードについて読んでください。
  名前付きグリッドラインを使用してグリッドアイテムを配置する

  番号付きグリッドラインを使用してグリッド上で要素を整理する方法を見てきました。しかし、グリッドラインの一部またはすべてに名前を付けて、代わりにそれらを参照することもできます。

  レイアウトを更新して、指名された行を含めるようにしましょう：

  上のコードでは、3つの垂直グリッドラインのみに名前を付けました。名前は、列の幅の横にある正方形の括弧で囲まれ、列線を表しています。

  これで、いくつかの要素をグリッドに配置できます。

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span><span>}
  </span>

  このコードは、以下のデモで実際に見ることができます。

  を参照

  cssグリッドの基本：codepenで名前付きの行でアイテムを名前を付けて配置する（@sitepoint）

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
  </span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
  </span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
  </span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  さらなる読み取り：

  
  
  名前付きグリッドラインの詳細をご覧ください。

  グリッド仕様の名前付き行について読んでください。

  名前付きグリッド領域を使用してグリッドアイテムを配置する

  グリッドレイアウトの最も興味深い「デザイナーに優しい」機能の1つは、グリッド領域、つまりグリッド内の1つ以上のセルをシンプルで直感的な方法で名前を付ける機能です。グリッドアイテムをレイアウトします。次のように機能します：

  Grid-Template-Areasを使用して、要素をレイアウトする方法を指定する簡単なテキストグリッドを作成しました。これで、これらのエリア名を要素に適用する必要があります。
  したがって、
  は4つの列すべてに及び、要素は2行目の最初の列にあるだけです。

  以下のペンでこれを実行していることがわかります。

  を参照

  cssグリッドの基本：codepenで名前領域を使用してアイテムを名前を使用してアイテムを配置します。

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span>  <span>gap: 10px;
  </span><span>}
  </span>

  このコードは、番号付きの行または名前付き行を使用するかどうかにかかわらず、以前のコードよりもはるかに簡単です。このような名前のグリッド領域を使用することは、実際のコードを書く代わりにWysiWygエディターを使用するなど、ほぼ恥ずかしくてシンプルです。しかし、確実に、それは不正行為ではありません！とてもクールです。

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span>  <span>gap: 10px;
  </span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
  </span><span>}
  </span>

  ライン番号とグリッド領域を備えた名前のラインを使用

  ライン番号や名前付き行を使用してグリッド領域を定義できることも注目に値します。たとえば、Grid-Template-Areasプロパティを使用する代わりに、このようなことをすることができます。

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span><span>}
  </span>

  パターンはrow-start / column-start / row-end / column-endです。 Codepen

  でこれのデモを確認できます。個人的には、この行と列のパターンを覚えておくのは本当に難しいと思いますが、グリッドの素晴らしいところは、同じことをする方法がたくさんあるということです。 グリッドアイテムのレイアウトの変更

  昔は、ある時点でページ要素のレイアウトを変更することを決定した場合、多くのコードリファクタリングにつながる可能性があります。たとえば、レイアウトの終わりまで要素を拡張したい場合はどうなりますか？グリッドエリアでは、とても簡単です。これを行うことができます：

  フッターからグリッドセルを取り外して脇に割り当てたばかりで、下のペンに表示されるものにつながりました。 ペンを参照

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
  </span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
  </span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
  </span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  cssグリッドの基本：codepenで名前付きエリア2を使用してアイテムを配置する（@sitepoint）

  
  
  どこかに空のセルが欲しいと判断するかもしれません。私たちは、そのように1つ以上の期間を使用するだけでそれを行います。

  これの結果を予測できるかどうかを確認してから、このCodepenデモをチェックしてください。 さらなる読み取り：

  grid-template-areasの詳細をご覧ください。

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span>  <span>gap: 10px;
  </span><span>}
  </span>

  グリッドエリアのプロパティの詳細をご覧ください。

  グリッドレイアウトを使用してメディアクエリを使用してください

  単一の列にグリッド要素を積み重ねるなど、小さな画面に別のレイアウトが必要な場合がよくあります。これを行う簡単な方法は、メディアクエリを介してグリッド領域を並べ替えることです。

  • 1つの列のみを指定し、その列に要素の順序を設定しました。 を参照してください
  cssグリッドの基本：codepenでメディアクエリを使用する（@sitepoint）

  上のペンの下部にある0.5xボタンを押して、レイアウトがどのように応答するかを確認します（または、Codepenのペンを表示してビューポートを広げて絞ります）。グリッドアイテムの表示順序を変更

  グリッドレイアウトの要素の表示順序を変更するのがどれほど簡単かを確認するために、今では良い点にいます。上記の例では、ソースの順序は

  、、

  、

  ですが、メディアクエリでは、要素の上に表示されるように

  要素を設定しました。グリッドを使用して、要素の表示順序を簡単に交換できます！それらすべての表示順序を完全に逆転させることさえできます。

  名前が付けられていない場合でも、グリッド要素を並べ替えることができます。デフォルトでは、グリッドアイテムはHTMLソースの注文に従って配置されます。また、デフォルトの順序は0です。この注文プロパティを使用して、要素の視覚的配置を変更できます。注文値が低いほど、要素が早く表示されます。負の整数でさえ使用できるので、

  要素が-1の順序を持​​っていた場合、最初に表示されます。 上記のように要素を注文するには、それぞれ

  、afaid>、

  の順序値を1、2、3に設定できます。 （ライブデモについては、このペンをチェックしてください。）

  ただし、注意の言葉：並べ替えられた要素は、アクセシビリティの悪夢になる可能性があります。

  さらなる読み取り：

  注文プロパティの公式仕様。

  アクセシビリティの懸念に関するセクションを含む、MDNで説明された注文プロパティ。

  メディアクエリのないレスポンシブグリッドレイアウト

  • 上で見たのは、レイアウトをさまざまな画面サイズに応答できるようにすることができることを見ました。第一に、列の幅をFRなどの柔軟なユニットに設定することにより、レイアウトは必要に応じて成長して縮小することがあります。第二に、メディアクエリを使用して、特定のブレークポイントでレイアウトを再編成できます。 グリッドレイアウトには、メディアクエリを使用せずにレイアウトリフローを可能にするツールがあります。ただし、上記で作業しているレイアウトでは、これを達成することはできません。各列が同じ幅を共有するよりシンプルなレイアウトでのみ機能します。
  次のHTMLを検討してください：

  これらのdivを幅広の画面に並べて座らせて、小さな画面に積み重ねましょう。

  以下のペンで結果を見ることができます。

  cssグリッドの基本：codepenでメディアクエリのないレスポンシブグリッド（@sitepoint）

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span><span>}
  </span>

  （繰り返しますが、上のペンの下部にある0.5xボタンを押して、レイアウトの応答方法を確認してください。）

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
  </span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
  </span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
  </span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  そのコードはもう少し高度であり、CSS Grid Repeat（）関数の使用方法について詳しく説明します。ここで見せることの主な目的は、グリッドレイアウトで何が可能かを感じることです。

  さらなる読み取り：

  • Auto-Fitキーワードの詳細をご覧ください。
  • min（）関数を使用してminmax（）関数の使用について詳しく読む。

  グリッド内の要素の重複

  グリッドレイアウトを作成したら、各グリッドアイテムを独自のグリッド領域に割り当てるだけではありません。グリッドアイテムを簡単に設定して、同じグリッド領域を部分的または全面的に共有できます。これにより、重複する要素を備えた、トリッキーなコードなしで、美しく創造的なレイアウトを作成できます。

  画像と画像を部分的にカバーするテキストを含むシンプルなグリッドを作成しましょう。これがHTMLです：

  次に、divと画像の間で部分的に共有されるいくつかの行と列を割り当てます。

  <span><span>.container</span> {
  </span>  <span>display: grid;
  </span><span>}
  </span>

  結果は、次のCodepenデモに示されています を参照してください

  cssグリッドの基本：codepenでcodepentのレイヤードグリッド要素（@sitepoint）

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  <span><span><span><header</span>></span>header<span><span></header</span>></span>
  </span>  <span><span><span><aside</span>></span>aside<span><span></aside</span>></span>
  </span>  <span><span><span><main</span>></span>main<span><span></main</span>></span>
  </span>  <span><span><span><footer</span>></span>footer<span><span></footer</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  
  divは、ソース順序の画像の後に来るという理由だけで、画像の上に表示されます。 z-indexを適用することにより、他の要素に表示される要素を変更できます。たとえば、上のペンの画像に2のzインデックスを設定してみてください。これで、div。
  の一部をカバーします

  さらなる読み取り：

  上記のデモの画像の位置付けを理解するには、CSSオブジェクトフィットとオブジェクトポジションの使用方法を確認してください。

  z-indexプロパティの詳細をご覧ください

  ラッピング

  この記事は、CSSグリッドレイアウトができることの基本的な紹介と同様に意図されています。希望は、それがさらなる学習と発見のための踏み台を提供することです。そして、グリッドについて学ぶことができる
  • 巨大な量があります。
  グリッドvs flexbox
  永遠の問題は、グリッドまたはフレックスボックスを使用する必要があるかどうかです。これら2つのレイアウトツールができることの間には、ある程度の重複があることは事実です。多くの場合、オーバーラップがある場合、特定のシナリオのそれぞれに優れたツールキットがあるものを確認するために、いくつかのテストを行う価値があります。 ただし、一般的なルールとして、これを覚えておいてください：

  FlexBoxは、主に単一の方向に要素をレイアウトするために設計されています（これらの要素が線に包まれていても）。

  グリッドは、要素を2つの方向にレイアウトするために設計されているため、水平方向と垂直の両方に整列しています。 このため、グリッドは一般的にページ全文のレイアウトに適していますが、FlexBoxはメニューのようなものをレイアウトするのに適しています。 グリッドとフレックスボックスのより詳細な比較については、FlexBoxまたはCSSグリッドをチェックしてください。意味のあるレイアウト決定を行う方法グリッドのブラウザのサポート

  この記事を最初に公開したとき - 2016年に戻って、グリッドはブラウザにとってかなり新しいものであり、サポートは普遍的ではありませんでした。最近では、すべての主要なブラウザがグリッドをサポートしています。まだサポートしていないいくつかの古いブラウザーが浮かんでいますが、多くの場合、これらのブラウザはまだ十分にコンテンツを表示します。すべてのキャッチオールアプローチの1つは、グリッドレイアウトをサポートしないブラウザーのフォールバックとして機能できるモバイルデバイス用の単一列レイアウトから始めることです。グリッドスタイルは、それらをサポートするブラウザのメディアクエリを介して追加できます - より広い画面に表示される。

  CaniuseのGridの最新のブラウザサポートをチェックできます。 グリッドのリソースの学習

  最後に、さらに学習リソースで終わりましょう。多くの素晴らしい人々が、グリッドでチュートリアル、ビデオ、本などを提供しています。ここにいくつかあります：

  CSSマスター、第3版
  • 、ティファニーブラウン著は、CSSの素晴らしい紹介であり、グリッドやその他のレイアウト方法の使用方法に関する詳細なガイダンスを備えています。 MDNグリッドリファレンス。 レイチェル・アンドリューのサンプルサイトによるグリッド。 （実際、レイチェル・アンドリューには、たくさんの信じられないほどの記事、チュートリアル、ビデオ、さらにはグリッドレイアウトに関する本があり、それに関する最も重要な専門家です。 >
  ジェン・シモンズによるレイアウトランドYouTubeシリーズ。 （ジェンはグーグルの価値がある別の名前です。）
  Kevin Powellは、YouTubeでチェックアウトする価値のある素晴らしいグリッドチュートリアルを紹介します。
  • CSS-Tricksは、CSSグリッドの完全なガイドを提供します。これは本当に便利なリソースです。
  CSSグリッドレイアウト
  • に関するFAQ
  CSSグリッドレイアウトとは何ですか？
  • CSSグリッドレイアウトは、Webページの複雑な2次元グリッドベースのレイアウトを作成できるCSSのレイアウトシステムです。グリッド内の要素を設計および配置するためのより柔軟で効率的な方法を提供します。
  • Webページでcssグリッドを有効にするにはどうすればよいですか？

  CSSグリッドを有効にするには、ディスプレイを使用できます。グリッド; CSSコードのプロパティ。これにより、選択したコンテナがグリッドコンテナになります。

  CSSグリッドの主なコンポーネントは何ですか？

  CSSグリッドの主なコンポーネントは、グリッドコンテナとグリッドアイテムです。コンテナは、ディスプレイ：gridを使用して定義されています。プロパティ、およびアイテムはコンテナ内に配置されています。

  CSSグリッド内の行と列をどのように定義しますか？ -rows、grid-template-columns、またはshorthandプロパティグリッドテンプレートを使用しています。

  CSSグリッドに異なる列幅と行の高さを持つことができますか？柔軟なサイジングのための固定長、パーセンテージ、またはFRユニットなど、グリッドテンプレート定義に異なる値を使用することによる列幅と列の高さ。グリッド内でグリッドをネストできますか？

  ​​

  はい、グリッド内にグリッドをネストでき、グリッドアイテム自体をグリッドコンテナにすることで複雑なレイアウトを作成できます。グリッドをさまざまな画面サイズに適応させることはできますか？

  はい、CSSグリッドは応答性があります。メディアクエリ、パーセンテージ、または相対ユニットを使用して、グリッドレイアウトをさまざまな画面サイズとデバイスに適合させることができます。

以上がCSSグリッドレイアウトの初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。