CSSグリッドレイアウト：強(qiáng)力で柔軟なWebサイトレイアウトを構(gòu)築

コアポイント

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

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

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

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

ブラウザサポート

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

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

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

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

注：Internet Explorerは現(xiàn)在、古いバージョンの仕様を?qū)g裝しています。殘念ながら、これは最新の仕様と完全に互換性がないことを意味します。このチュートリアルの例を研究するときは、対応するフラグを有効にしてChromeまたはFirefoxを使用することをお?jiǎng)幛幛筏蓼埂?

グリッドシステムの用語

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

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

および

で使用するように設(shè)計(jì)されています。仕様に応じて - fr grid-rows grid-columns分?jǐn)?shù)空間の割り當(dāng)ては、すべての「長さ」またはコンテンツベースの行と列サイズが最大に達(dá)した後に発生します。

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

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

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

面積：領(lǐng)域は、任意の數(shù)のセルを備えた長方形の形狀です。したがって、トラックは領(lǐng)域であり、セルも領(lǐng)域です。

グリッド內(nèi)の位置要素

基本から始めましょう。このセクションでは、グリッドを使用して特定の場所に要素を見つける方法を教えます。 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列は、要素間の必要な間隔を提供するスロットとして機(jī)能します。最初の列の幅は200pxです。 3番目の列は、殘りのスペースのパート0.3を占めます。同様に、5番目の列は、殘りのスペースの0.7部分を占めています。 grid-template-rows 10px最初の行を使用して、

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

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

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

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

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

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

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

grid-column-start上記のすべてを考慮して、要素Bを2番目のセルに移動(dòng)するには、次の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番目のセルに移動(dòng)するには、次のCSSを使用します。

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

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

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

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

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

タグ內(nèi)の要素の順序は、Webページの要素の位置に影響しないことを忘れないでください。 CSSを変更しない限り、フッターをタグ內(nèi)のヘッダーの上に配置できます。Webページの要素の位置は変更されません。もちろん、私はこれをお?jiǎng)幛幛筏蓼护?。ポイントは、マーカーが要素の位置を決定しなくなるということです。

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

の値とさまざまな要素の他の屬性を決定することです。最後の例と同じように、グリッドグラフを使用して、すべてのグリッドプロパティの値を決定します。 （ここでは畫像リンクが省略されています）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>

結(jié)論

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

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

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

FAQ

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

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

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

屬性を

または

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

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

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

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

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

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

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

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

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

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

CSSグリッドレイアウトの

ユニットは何ですか？ fr

CSSグリッドレイアウトの

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

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

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

および

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

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

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

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

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

以上がCSSグリッドレイアウトの導(dǎo)入の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。