CSSグリッドを使用して、Web要素をレイアウトする7つの方法

（この記事は2017年3月23日に更新されました。特定のコンテンツ：CSSグリッドレイアウトのブラウザサポート） この記事では、グリッドレイアウトモジュールを使用して要素をWebページに配置する7つの方法を紹介します。

SitePointは以前に「CSSグリッドレイアウトの紹介」を公開していました。最近、「CSSグリッドレイアウトのドラフト作業(yè)の現(xiàn)在の狀況」も書きました。

ここでは、CSSグリッドを使用してWebページ上の要素をレイアウトする特定の方法に焦點を當てます。それでは、それらを1つずつ紹介しましょう。

、
• 、grid-row、grid-column、grid-areaキーワードなど、複數(shù)のメソッドを使用して、共通名を含む複數(shù)の方法を使用して、Webページに要素を配置することができます。 ??>ネームラインとキーワード用の名前付きグリッドエリア。 span span
屬性を使用すると、要素の左上と右下の角を指定できますが、
• キーワードを使用して、要素の範囲に及ぶ列または行の數(shù)を設(shè)定できます。 grid-area span名前行は複雑なレイアウトを整理するのに役立ちます。各行は、含まれるコンテンツのタイプに応じて名前を割り當てます。このプロセスは、特定のセクションのすべてのグリッドラインの共通名を使用し、要素が
キーワードで及ぼすこれらの行の數(shù)を指定することにより、さらに簡素化できます。
• span名前グリッド領(lǐng)域では、ラインではなく異なる領(lǐng)域に名前を割り當てることで、要素の割り當てをシンプルで簡単にします。ただし、指定されたメッシュ領(lǐng)域は現(xiàn)在、長方形のみになります。
• CSSグリッドレイアウトのブラウザサポート

現(xiàn)在、グリッドレイアウトには一貫したブラウザのサポートがありません。ただし、2017年3月現(xiàn)在、ChromeおよびFirefoxブラウザの最新バージョンは、デフォルトでCSSグリッドレイアウトをサポートしています。 IEは依然として古い実裝をサポートしており、オペラは実験的なWebプラットフォームフラグを有効にする必要がありますが、Safariはまったくサポートしていません。この記事のすべての例を正しく使用するには、ChromeまたはFirefoxを使用することをお勧めします。何らかの理由でこれらのブラウザで問題を見つけた読者のために、各手法の最終結(jié)果を示すためにスクリーンショットを追加しました。

次の方法を使用して同じ効果を?qū)g現(xiàn)できます。

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Codepenデモリンク

メソッド2：grid-rowおよびgrid-columnを使用します

最初の例のCSSは読みやすく理解しやすいものの、4つの異なるプロパティを使用して単一の要素を配置する必要があります。 4つのプロパティの代わりに、2つのプロパティ（およびgrid-column）のみを使用できます。両方のプロパティは、スラッシュによって分離された2つの値を取得します。最初の値は要素の開始線を決定し、2番目の値は要素のエンド行を決定します。 grid-row

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

メソッド3：

を使用します grid-area技術(shù)的には、私たちがレイアウトしているプロジェクトは、Webページの特定の領(lǐng)域を占有しています。このアイテムの境界は、グリッドラインに提供する値によって決まります。これらのすべての値は、

このプロパティを使用する場合のCSSの外観は次のとおりです。 grid-area

-

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

row-start前の例と同様に、アイテムCをグリッドの右下隅に配置するには、次のCSSを使用できます。 col-start row-endcol-endCodepenデモリンク

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

キーワードを使用します

エンドラインを指定することに加えて、要素をレイアウトする場合、キーワードを使用して、特定の要素が広がる列または行の數(shù)を設(shè)定することもできます。 span 次のことは、

要素が1つの行または列のみに及ぶ場合、spanキーワードとその値を省略できます。

今回は、グリッドの左上隅にアイテムCを配置しましょう。これは、次のCSSを使用して行うことができます。 span

.c {
  grid-area: 2 / 2 / 4 / 4;
}

Codepenデモリンクspan

.selector {
  grid-row: row-start / span row-span-value;
  grid-column: col-start / span col-span-value;
}

を使用します

これまでのところ、生の數(shù)字を使用してグリッドラインを指定してきました。これは、簡単なレイアウトに対処するときに使いやすいです。ただし、複數(shù)の要素を配置する必要がある場合は、少し面倒です。ほとんどの場合、ページ上の要素は特定のカテゴリに分類されます。たとえば、ヘッダーは、列線C1から列線C2から、行Line R1から行Line R2から行われる場合があります。すべての行に正しく名前を付けて、數(shù)字の代わりにそれらの名前で要素を配置する方がはるかに簡単です。

非常に基本的なレイアウトを作成して、コンセプトをより明確にしましょう。まず、グリッドコンテナに適用されたCSSを変更する必要があります：

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

私が上記で行ったのは、含まれるコンテンツのタイプに基づいてすべての行に名前を割り當てることです。ここでのアイデアは、さまざまな要素の場所を知らせる名前を使用することです。この特定の例では、ヘッダー要素はすべての列に及びます。したがって、名前を「ヘッドコルスタート」と「ヘッドコルエンド」をそれぞれ最初と最後の列線に割り當てることは、これらの行がヘッダーの左端と右端を表していることを明確に示します。他のすべての行は、同様の方法で名前を付けることができます。すべての行に名前が付けられた後、次のCSSを使用してすべての要素を配置できます。

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

通常よりも多くのCSSを書く必要がありますが、CSSを見るだけで要素の位置を理解できます。

Codepenデモリンク

メソッド6：共通名とspanキーワードを持つネーミングラインを使用します<

この場合、「コンテンツ」などのコンテンツパーツのすべてのグリッド行に1つの共通名のみを使用し、

spanこの方法を使用して、CSSは次のようになります：

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

メソッド7：名前付きグリッド領(lǐng)域を使用します<

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

結(jié)論

それだけです！ CSSメッシュレイアウトを使用して要素をレイアウトする7つの異なる方法をカバーしました。この記事に関するヒントを他の読者と共有したいですか？自分のプロジェクトで使用する方法はどれですか？コメントでお知らせください。

cssグリッドレイアウトfaq

CSSグリッドレイアウトとFlexBoxの違いは何ですか？

CSSグリッドにアイテムを揃える方法は？

CSSグリッドは、「justify-Items」、「align-Items」、「justify-self」、「align-self」など、アイテムを調(diào)整するためのいくつかのプロパティを提供します。これらのプロパティは、グリッドアイテムが行と列の軸に沿って整列する方法を制御します。アイテムをスタート、エンド、センター、または伸ばしてグリッド領(lǐng)域を埋めるためにアイテムを揃えることができます。

CSSグリッドレイアウトのグリッドラインは何ですか？

CSSグリッドレイアウトでは、グリッドラインはグリッド構(gòu)造を構(gòu)成する仕切りです。それらは水平または垂直であり、1から數(shù)字を付けます。グリッドアイテムを任意の2行の間に配置できます。これにより、レイアウトデザインには多くの柔軟性が得られます。

グリッドプロジェクト間でギャップを作成する方法は？

CSSグリッドは、グリッドアイテム間のスペースを作成するために使用できる「ギャップ」プロパティ（以前は「グリッドギャップ」）を提供します。このプロパティは、行と列の間のギャップのサイズを指定して、1つまたは2つの値を取得できます。

CSSグリッドの「グリッドテンプレートエリア」屬性は何ですか？

CSSグリッドの「グリッドテンプレートエリア」プロパティを使用すると、名前付きグリッド領(lǐng)域を參照してグリッドレイアウトを作成できます。これらの領(lǐng)域をグリッドプロジェクトの「グリッドエリア」プロパティを使用して定義し、「グリッドテンプレートエリア」プロパティを使用してCSSコードに視覚的に配置できます。

CSSグリッドでグリッドアイテムをオーバーラップする方法は？

に保持し、元のリンクを保持していることに注意してください。 CodePenに直接アクセスできないため、CodePenリンクをプレースホルダーに置き換えました。 これらのプレースホルダーを?qū)g際のCodePenリンクに置き換える必要があります。 .webp

以上がCSSグリッドレイアウトを使用して要素を配置できる7つの方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。