クイックヒント：弾力性のあるCSSコンポーネントの配送

この記事では、CSSのコンテナクエリがレイアウトのバリエーションが組み込まれた回復力のある再利用可能なコンポーネントがどのように作成され、「ビルドを1回、どこにでも展開する」アプローチを実現する方法を示しています。 この例は、さまざまな画面サイズに適応するサブスクリプションフォームに焦点を当てています。

フォームは、レイアウトの柔軟性にCSSグリッドを使用します。 3つのグリッド領域（伝説、フィールド、送信）が定義されており、コンテナクエリを使用してコンテナの幅に基づいて配置が変更されます。 ビデオは、レイアウトの調整を示しています

要素は、

を使用してコンテナとして指定されます。 ネストされた

divは、コンテナクエリの標的を絞ります：.subscription-form container-type: inline-size; .form__content最初のコンテナクエリ（

）は、中規模のレイアウトのグリッドテンプレートを定義します：

<code class="language-css">.subscription-form {
  container-type: inline-size;
}

.form__content {
  display: grid;
  gap: 1rem;
}</code>

@container (min-width: 375px)2回目のクエリ（

）大きな画面のレイアウトを調整します。

<code class="language-css">@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend field" 
            "legend submit";
    align-items: center;
    column-gap: 2rem;
  }
  /* ... grid area assignments for legend, .form-group, button ... */
}</code>

別のビデオは、応答性のある動作を示しています @container (min-width: 700px)

<code class="language-css">@container (min-width: 700px) {
  .form__content {
    grid-template-areas: "legend field submit";
  }
  button {
    align-self: end;
  }
}</code>

CodePenデモは、ライブでインタラクティブな例を提供します。 このアプローチは、再利用可能で適応可能なCSSコンポーネントを作成するためのコンテナクエリの力を示しています。 この抜粋は、

以上がクイックヒント：弾力性のあるCSSコンポーネントの配送の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。