Quick Tip: Shipping Resilient CSS Components

This article demonstrates how container queries in CSS create resilient, reusable components with built-in layout variations, achieving a "build once, deploy everywhere" approach. The example focuses on a subscription form adapting to different screen sizes.

The form utilizes CSS Grid for layout flexibility. Three grid areas (legend, field, submit) are defined, and their arrangement changes based on the container's width using container queries. A video shows the layout adjustments.

The .subscription-form element is designated as the container using container-type: inline-size;. A nested .form__content div is targeted by the container queries:

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

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

A first container query ( @container (min-width: 375px) ) defines the grid template for medium-sized layouts:

<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>

A second query ( @container (min-width: 700px) ) adjusts the layout for larger screens:

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

Another video demonstrates the responsive behavior.

A CodePen demo provides a live, interactive example. This approach showcases the power of container queries for creating reusable and adaptable CSS components. This excerpt is from Unleashing the Power of CSS.

The above is the detailed content of Quick Tip: Shipping Resilient CSS Components. For more information, please follow other related articles on the PHP Chinese website!