CSSグリッド内の拡張可能なセクション

CSSグリッドは、最小限のコードでレスポンシブレイアウトを作成するための素晴らしいツールであり、多くの場合、メディアクエリの必要性を排除します。クリーンなHTMLに優先順位を付けるために、さまざまなレイアウトに使用できます。ただし、最近のUIチャレンジでは、独自の問題が発生しました。これは、ボタンをクリックしたときにグリッドセルを全幅に拡張し、元のグリッド構造と応答性を維持しながら。

要件は、拡張されたセル：

1. トリガーセルの真下に表示されます。
2. 完全なグリッド幅を占有します。

このソリューションは、驚くほどエレガントで、CSSグリッドの数行しか使用していません。この記事では、JavaScriptなしでこれを達成するための3つの簡単なCSSグリッド手法について詳しく説明しています。

問題：拡張可能な製品カード

UIタスクの簡略化された例は次のとおりです。ストーリーブックコンポーネントライブラリには、製品カードグリッドがあります。各カードには「クイックビュー」ボタンが必要でした。この拡張は次のとおりでした。

• クリックしたカードの下に全幅カードを動的に挿入します。
• 元のDOM注文と視覚的なグリッドの配置を保存します。
• ブラウザのサイズ変更で完全に応答し続けます。

最初は、カードを再配置するにはJavaScriptが必要であると思いました。 「クイックビュー」の実装のオンライン検索では、主にモーダルまたはオーバーレイソリューションが得られました。モーダルは集中コンテンツに一般的ですが、グリッド内にシームレスに統合されるソリューションが必要でした。

ソリューションは、いくつかの強力なCSSグリッド機能を組み合わせることから来ました。

CSSグリッドトリック＃1：オートフィッティング列

私の既存のグリッドシステムはすでにこの手法を利用しています：

 .grid {
  ディスプレイ：グリッド;
  ギャップ：1rem;
  Grid-Template-Columns：Repeat（auto-fit、20rem）;
}

grid-template-columns: repeat(auto-fit, 20rem);必要に応じて、利用可能なスペースに自動的に調整し、利用可能なスペースに自動的に調整する列（ここで20レム幅）を作成します。 Sara Soueidanのauto-fitとauto-fillの説明は素晴らしいです。簡単にするために、固定列幅を使用しました。

CSSグリッドトリック＃2：全幅スパン

拡張カードに対応するには：

 .fullwidth {
  グリッドコラム：1 / -1;
}

トリック＃1が明示的なグリッドを作成するため、 grid-column: 1 / -1;幅全体にわたって（列1から最後まで）。

ただし、これにより、幅の全幅カードの上にギャップが残ります。

CSSグリッドトリック＃3：密集した梱包

これらのギャップを埋めると、フェイクマゾンのアプローチが使用されます。

 .grid {
  Grid-auto-flow：濃い​​;
}

grid-auto-flow: dense;グリッドの早い段階でギャップを埋める自動配置を最適化します。これは、次の場合に効果的に機能します

• すべての列には同じ幅があります（または、柔軟な幅にminmax()を使用）。
• 列内のすべてのセルは同じ高さを持っています（デフォルト、 align-items: stretchセルを暗黙的に列の高さを満たします）。

元のDOM注文は保存されており、アクセシビリティに重要です。 MDNは、CSSグリッドの自動配置の包括的な説明を提供します。

完全なソリューション

これらの3つの手法は、最小限のCSS、メディアクエリなし、およびレイアウト計算のためのJavaScriptのないシンプルで効率的なレイアウトを作成します。

JavaScriptの役割

JavaScriptは依然として必要ですが、機能のためだけです。クリックイベントの管理、フォーカス、挿入カードの表示。プロトタイプでは、全幅カードがハードコーディングされています。 JavaScriptは可視性を切り替えます。

生産環境では、カードが動的にフェッチされ、挿入される可能性があります。 DOMの膨満感を避けるために、注入されたコンテンツは進行性の強化と見なされる必要があります。 JavaScriptが失敗した場合、ユーザーは製品の詳細ページにリダイレクトされます。

アクセシビリティの考慮事項

セマンティックHTML、ARIA属性、およびキーボードナビゲーションの優先順位付け：

• グリッドは使用します<ul>セマンティックの明確さのため。</ul>
• 製品カードはそうです<li>適切な見出しのある要素。</li> <li> DOM注文は、Natural Tab Orderのために保持されます。</li> <li>フォーカス管理により、適切なキーボードナビゲーションが保証されます。 （さらなる改善には、注入カードの明示的なラベル、閉鎖のための<kbd>ESC</kbd>キーバインディング、視認性を確保するためのビューポートスクロールが含まれます）。</li>

結論

このアプローチは、モーダルに代わるクリーンな代替品を提供し、ページを不明瞭にすることなく追加のコンテンツを明らかにします。画像キャプションやヘルパーテキストなど、さまざまなシナリオに役立つ可能性があります<details>/<summary></summary></details>場合によっては。私はあなたの考えや代替アプローチを聞きたいと思っています。

以上がCSSグリッド内の拡張可能なセクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。