垂直アライメントの達成（ありがとう、サブグリッド！）

最新のWebデザインツールは、垂直アライメント機能を大幅に改善しました。多くの場合、幅960pxの初期のウェブサイトレイアウトは、12列グリッドを使用して水平方向のアライメントに大きく依存していました。メディアクエリの出現は、多くの問題を解決しながら、特に要素が反射または再配置するときのアラインメントに関して、新しい課題をもたらしました。

一般的なシナリオを考えてみましょう：それぞれ内のボタングループを含む「バー」<fieldset></fieldset>で<legend></legend>。より大きな画面では、アラインメントは簡単です。フロートを使用した単純なCSSアプローチは、これを処理し、より小さなブレークポイントで応答性のある動作を提供します。

 .accessibility-tools fieldset {
  幅：48％;
  フロート：左;
  マージン右：1％;
}

/* 携帯 */
@mediaのみの画面と（max-width：480px）{
  .accessibility-tools fieldset {
    幅：100％;
  }
}

ただし、小さな画面では、垂直方向の不整合が明らかになります。固定された幅では、メディアクエリを使用したピクセルベースのCSSソリューションはアライメントを強制することができますが、このアプローチには柔軟性がなく、特定のコンテンツに関連する「マジック番号」に依存しています。

 /* 携帯 */
@mediaのみの画面と（max-width：480px）{
  伝説 {
    幅：160px;
  }
  ボタン {
    幅：130px;
  }
}

この柔軟性は、メディアクエリ（私が最小限に抑えることを目指している）に依存しているため、より適応性のあるソリューションを必要とします。理想的なソリューションでは、ボタンとラベルが応答できるようにする必要があります。

1. 利用可能なスペース
2. コンテンツの寸法
3. 周囲の要素

ヘイドン・ピカリングの「The Flexbox Holy Albatross」に示されているように、メディアのクエリは周囲の空間を考慮していないため不足しています。望ましい動作は2番目の動作です<fieldset></fieldset>両方のフィールドセットが単一の行に適合しなくなった場合にのみラップします。

フレックスボックスとグリッド：初期試行

FlexBoxは、 flex-wrap: wrap Propertyを備えた柔軟性を向上させ、要素が複数のラインに流れるようにします。ただし、完全な垂直アライメントのためには、多くの場合、 min-widthが必要です。

レイアウト管理用に設計されたCSSグリッドは、メディアクエリのないマルチラインレイアウトのauto-fitおよびauto-fillキーワード（ repeat()内）を提供します。 auto-fitを使用して、次のことを達成します。

 .wrapper  -  accessibility-tools {
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（auto-fit、450px）;
  グリッドギャップ：10px;
}

ただし、最適なアライメントには、絶対幅の値が必要になる場合があります。 frユニットまたはminmax()を使用した柔軟なグリッドトラックはさらに改善されますが、グリッドコンテナの直接の子供のみがグリッドアイテムと見なされるため、制限が生じます。

サブグリッドソリューション

CSSグリッドレベル2では、 subgridを導入し、ネストされたグリッドが親からトラックサイジングを継承できるようにします。これにより、独立したネストされたグリッドの問題が解決します。 Subgridを使用すると、子グリッドの要素が兄弟グリッドのコンテンツに応答することができます。

ボタンの例では、親グリッドはauto-fillとminmax()を使用して定義されます。

 .wrapper  -  accessibility-tools {
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（auto-fill、minmax（150px、1fr））;
  グリッドギャップ：10px;
}

子グリッドはsubgridを使用して、親の列トラックを継承します。

 .sub-grid {
  ディスプレイ：グリッド;
  グリッドコラム：スパン3;
  Grid-Template-Columns：subgrid;
  Align-Items：Center;
}

これにより、一貫したアライメントと応答性のある動作が保証されます。ボタンとラベルは、利用可能なスペースに適応し、必要な場合にのみ新しいラインに包みます。

ブラウザの互換性とさらなる読み取り

現在、サブグリッドブラウザーのサポートは限られています（主にFirefox）。 CSS機能クエリは、他のブラウザにフォールバックを提供できます。詳細なブラウザの互換性情報については、caniuse.comを参照してください。このトピックについてさらに読むことには、ミリアム・スザンヌ、レイチェル・アンドリュー、ヘイドン・ピカリングによる記事（元の記事で提供されているリンク）が含まれています。フォーム要素、グリッド、およびフレックスボックスを含むバグを処理するには、フィールドセットの周りのラッパーが必要になる場合があります。 Fieldsetのdisplayプロパティは、これに対処するためにcontentsに設定できます。

以上が垂直アライメントの達成（ありがとう、サブグリッド！）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。