CSSグリッドレイアウトの導入

CSSグリッドレイアウト：強力で柔軟なWebサイトレイアウトを構築

コアポイント

• CSSグリッドレイアウトは、inlineやfloatなどのプロパティや個別のグリッドシステムスタイルシートなどのプロパティを使用せずに、複雑なWebサイトレイアウトを作成するためのより強力で柔軟な方法を提供します。
• 現在、IE 10とエッジはCSSグリッドレイアウトのみをサポートしていますが、ChromeおよびFirefoxの特定のフラグまたはPolyFillを使用して有効にできます。
• CSSグリッドレイアウト「測定単位、ライン、トラック、セル、および「FR」と呼ばれる領域を使用して、Webページ上の要素のレイアウトを定義します。
• CSSグリッドレイアウトにより、マーカーとレイアウトを完全に分離できるようになり、CSSの維持が容易になり、デザインの無限の可能性が得られます。

写真はSitePoint/Natalia Balskaからのものです。

複雑なWebサイトを作成する場合、グリッドは非常に重要です。最新のWebデザインにおけるグリッドの重要性は、グリッドシステムを実装して開発をスピードアップするフレームワークの数から見ることができます。

CSSグリッドレイアウト仕様の導入により、グリッドシステムを使用するために別のスタイルシートを含める必要はなくなりました。もう1つの利点は、Webページに要素をアレンジするために

やinlineなどの属性に依存する必要がなくなることです。このチュートリアルでは、グリッドシステムの基本をカバーし、基本的なブログレイアウトを作成します。 float

ブラウザサポート

現在、IE 10とEdgeサポートグリッドレイアウトのみ - 商用サイトではまだ使用できません。

chrome：// flagsの「実験的なWebプラットフォーム」の機能「

"実験Webプラットフォーム機能」を介してChromeで有効にすることができます。 Firefoxで

フラグを使用して有効にすることができます。 別のオプションは、PolyFillを使用することです。 CSSグリッドポリフィルが存在します！上記のさまざまなオプションを使用すると、グリッドレイアウトの実験を開始し、まだ初期段階にあるときにできる限り学ぶことができます。 layout.css.grid.enabled

注：Internet Explorerは現在、古いバージョンの仕様を実装しています。残念ながら、これは最新の仕様と完全に互換性がないことを意味します。このチュートリアルの例を研究するときは、対応するフラグを有効にしてChromeまたはFirefoxを使用することをお勧めします。

グリッドシステムの用語

要素をレイアウトするという点では、CSSグリッドシステムはテーブルに似ています。ただし、より強力で柔軟です。このセクションでは、グリッドを使用するときに注意する必要があるいくつかの用語について説明します：

ユニット：このユニットは、利用可能なスペースの一部を指定するために使用されます。

および

で使用するように設計されています。仕様に応じて - fr grid-rows grid-columns分数空間の割り当ては、すべての「長さ」またはコンテンツベースの行と列サイズが最大に達した後に発生します。

line：行は、他の要素の境界を定義します。それらは垂直に、そして水平に走ります。下の図には、4つの垂直線と4つの水平線があります。

道路：トラックは平行線の間のスペースです。以下の図には、3つの垂直トラックと3つの水平トラックがあります。

セル：セルはグリッドの基本的な構成要素です。下の図には、合計9つのセルがあります。

面積：領域は、任意の数のセルを備えた長方形の形状です。したがって、トラックは領域であり、セルも領域です。

グリッド内の位置要素

基本から始めましょう。このセクションでは、グリッドを使用して特定の場所に要素を見つける方法を教えます。 CSSグリッドレイアウトを使用するには、親要素と1人以上の子供が必要です。デモンストレーションのために、次のタグをグリッドシステムとして使用します。

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

タグを完了した後、以下に示すように、親要素に

またはdisplay: gridを適用する必要があります。 display: inline-grid

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

および

プロパティは、さまざまな行と列の幅を指定するために使用されます。上記の例では、5つの列を定義しました。 grid-template-columns列は、要素間の必要な間隔を提供するスロットとして機能します。最初の列の幅は200pxです。 3番目の列は、残りのスペースのパート0.3を占めます。同様に、5番目の列は、残りのスペースの0.7部分を占めています。 grid-template-rows 10px最初の行を使用して、

の最初の行を使用して、内部コンテンツに基づいてラインを拡張できるようにします。

行はスロットとして機能します。 grid-template-rows autoこの時点で、次のデモに示すように、要素は密接に配置されています。 （CodePenデモリンクは省略されています）20px

要素Bは、スロットとして使用する予定の2番目の列にあることを観察します。グリッド内の子要素の位置を指定しない場合、ブラウザは最初の行が完全に満たされ、残りが次の行に移動するまで、各セルに1つの要素を配置します。これが、2列目に4つの予備の列が残っている理由です。

グリッド内の特定のセルに要素を移動するには、CSSの位置を指定する必要があります。グリッドシステムを使用して要素を移動する方法を説明する前に、以下の画像をご覧ください。 （ここでは画像リンクが省略されています）

この場合、「ラインベースの配置」を使用します。ラインベースの配置とは、グリッドシステムのラインが配置および制限要素のガイドとして機能することを意味します。要素Bを例にしてみましょう。水平方向には、列3から始まり、列4から終わります。垂直軸には、行1と2行目の間にあります。

を使用して、要素の開始垂直線を指定します。この場合、3に設定されます。

要素の端垂直線を示します。この場合、このプロパティは4に等しくなります。対応する行の値も同様に設定されます。

grid-column-start上記のすべてを考慮して、要素Bを2番目のセルに移動するには、次のCSSを使用します。

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

同様に、要素Fを6番目のセルに移動するには、次のCSSを使用します。

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

これらの変更をCSSに変更した後、このデモのように要素は正しく間隔を置く必要があります。 （CodePenデモリンクは省略されています）

基本的なレイアウトを作成

基本的なブログレイアウトを作成する時が来ました。ブログには、ヘッダー、フッター、サイドバー、および実際のコンテンツ用の2つのセクションがあります。マーカーから始めましょう：

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

タグ内の要素の順序は、Webページの要素の位置に影響しないことを忘れないでください。 CSSを変更しない限り、フッターをタグ内のヘッダーの上に配置できます。Webページの要素の位置は変更されません。もちろん、私はこれをお勧めしません。ポイントは、マーカーが要素の位置を決定しなくなるということです。

私たちが今しなければならないことは、

の値とさまざまな要素の他の属性を決定することです。最後の例と同じように、グリッドグラフを使用して、すべてのグリッドプロパティの値を決定します。 （ここでは画像リンクが省略されています）grid-row-end 上の図に示すように、ヘッダーは列1から列4に、行1から行2になります。これは次のようになります：

同様に、「エクストラ」は列3から列4に、行5から6行6になります。したがって、CSSは次のとおりです

.element-f {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

他のすべての要素のグリッドプロパティを簡単に決定できるようになりました。 Codepenデモンストレーションをチェックして、さまざまなグリッド値を試して、ラインベースの配置をよりよく理解してください。 （CodePenデモリンクは省略されています）

<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Info</div>
  <div class="grid-element footer">Footer</div>
</div>

結論

CSSグリッドレイアウト仕様により、複雑なレイアウトを簡単に作成できます。書く必要があるCSSは、よりシンプルでメンテナンスが簡単です。デザインで複雑なレイアウトを作成する場合、またはその他の属性を使用する必要はなくなりました。もう1つの大きな利点は、マーキングとレイアウトの完全な分離です。 CSSグリッドレイアウトでは、可能性は無限です。

このチュートリアルについてご質問がある場合は、コメントでお知らせください。

CSSグリッドレイアウトに関するfloat

FAQ

CSSグリッドレイアウトは、他のCSSレイアウトメソッドとどのように異なりますか？

CSSグリッドレイアウトは、1次元のFlexBoxなどの他のCSSレイアウトメソッドとは異なる2次元レイアウトシステムです。これは、CSSグリッドでは、他の方法ではできない水平レイアウトと垂直レイアウトの両方を制御できることを意味します。より複雑なデザインと大規模なレイアウトを処理するように設計されています。また、より柔軟で強力であり、より創造的でより細かいデザインを可能にします。 CSSグリッドレイアウトを始める方法は？

CSSグリッドレイアウトの使用を開始するには、要素の

属性を

または

に設定する必要があります。これにより、要素はグリッドコンテナとその子要素をグリッドアイテムにします。その後、さまざまなメッシュプロパティを使用して、メッシュのレイアウトとメッシュアイテムの位置を定義できます。

他のCSSレイアウトメソッドでCSSグリッドレイアウトを使用できますか？

はい、CSSグリッドレイアウトは、他のCSSレイアウトメソッドと組み合わせて使用​​できます。たとえば、WebサイトのコンポーネントにFlexBoxを使用したり、全体的なレイアウトにはCSSグリッドを使用できます。これにより、各レイアウトアプローチを活用できます。

CSSグリッドレイアウトを使用してグリッドを作成する方法は？

CSSグリッドレイアウトを使用してグリッドを作成するには、最初に要素の

属性をdisplayまたはgridに設定してグリッドコンテナを定義する必要があります。その後、inline-gridおよびgrid-template-columnsプロパティを使用して、グリッド内の列と行の数とサイズを定義できます。 grid-template-rows

グリッドにアイテムを配置する方法は？

プロパティとgrid-columnプロパティを使用して、グリッドにアイテムを配置できます。これらのプロパティを使用すると、プロジェクトの開始ラインとエンドラインを指定し、グリッドの特定のセルまたはセルに効果的に配置できます。 grid-row

グリッドラインとグリッドトラックとは何ですか？

CSSグリッドレイアウトでは、グリッドラインはグリッド構造を構成する仕切りです。それらの数値は1から始まり、ライン数は上から下、左から右に増加します。グリッドトラックは、2つの隣接するグリッドラインの間のスペースで、列または行ができます。

CSSグリッドレイアウトの

ユニットは何ですか？ fr

CSSグリッドレイアウトの

ユニットは「スコア」を表します。グリッドコンテナ内の使用可能なスペースの一部を表します。たとえば、3つの列のグリッドがあり、1つの列の幅をfrに設定し、他の2つの列を1frに設定すると、最初の列は使用可能なスペースの3分の1を占め、もう1つの列は2つを占有します。列はそれぞれ3分の1を占めます。 2fr

グリッドを応答する方法は？

グリッドをレスポンシブにするには、

および

プロパティを備えたメディアクエリを使用できます。また、grid-template-columnsおよびgrid-template-rowsキーワードを使用して、auto-fill関数を使用して、ビューポートのサイズに応じて列と行の数とサイズを自動的に調整することもできます。 auto-fit repeatグリッドにグリッドをネストできますか？

はい、CSSグリッドレイアウトにグリッドをネストできます。これは、グリッドプロジェクト自体をグリッドコンテナにして、複雑なネストされたレイアウトを作成できることを意味します。

CSSグリッドレイアウトはすべてのブラウザーによってサポートされていますか？

すべての最新のブラウザー（Chrome、Firefox、Safari、Edgeを含む）は、CSSグリッドレイアウトをサポートしています。ただし、Internet Explorerはそれをサポートしていません。したがって、サポートされていないブラウザを使用するユーザーに代替レイアウトを提供することが重要です。

外部のウェブサイトや写真にアクセスできないため、写真を直接表示できないことに注意してください。 画像リンクが最終出力に正しく追加されていることを確認してください。

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