Shipping Resilient CSS Components — SitePoint

In this quick tip excerpted from Unleashing the Power of CSS, Stephanie shows how container queries enable us to ship resilient components containing built-in layout and style variants.

It might seem quite bold to say, but container queries allow us to apply the “build once, deploy everywhere” methodology. As a design systems engineer, it really appeals to me to be able to ship design system components with built-in layout and style variants.

To demonstrate this idea, the image below shows a subscription form. Container queries have been applied, and the component is shown in a full-width area within the narrower space of the sidebar and at the medium width within the content area.

Grid is an excellent companion for composing these variants. Using grid template areas, we’re able to rearrange the form sections without the need for extra markup. In this subscription form component, I’ve identified three grid areas: legend, field, and submit. The overlays added in the following video show how the layout changes across the variants.

In the code for the subscription form, the

element has a class subscription-form and is set as the container. A nested

with a class of form-content is what our container queries will then modify:

<code class="css language-css"><span class="token selector"><span class="token class">.subscription-form</span></span> <span class="token punctuation">{</span>
  <span class="token property">container-type</span><span class="token punctuation">:</span> inline-size<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code>

At the narrowest default width, the form is a simple grid stack with a gap applied:

<code class="lang-css">.form__content {
  display: grid;
  gap: 1rem;
}
</code>

The first container query for the mid-sized layout is doing the heavy lifting of creating the grid template and assigning all of the elements to the grid areas:

<code class="css language-css"><span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token number">375</span><span class="token unit">px</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector"><span class="token class">.form__content</span></span> <span class="token punctuation">{</span>
    <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> 
            <span class="token string">"legend field"</span> 
            <span class="token string">"legend submit"</span><span class="token punctuation">;</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">column-gap</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">rem</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">legend</span> <span class="token punctuation">{</span>
    <span class="token property">grid-area</span><span class="token punctuation">:</span> legend<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector"><span class="token class">.form-group</span></span> <span class="token punctuation">{</span>
    <span class="token property">grid-area</span><span class="token punctuation">:</span> field<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">button</span> <span class="token punctuation">{</span>
    <span class="token property">grid-area</span><span class="token punctuation">:</span> submit<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code>

The second, final container query then only has to adjust the grid-template-areas definition to horizontally line up the areas. Only one additional tweak is needed, which is to realign the Subscribe button to the end position, which visually aligns it to the email input:

<code class="css language-css"><span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token number">700</span><span class="token unit">px</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector"><span class="token class">.form__content</span></span> <span class="token punctuation">{</span>
    <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> 
            <span class="token string">"legend field submit"</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">button</span> <span class="token punctuation">{</span>
    <span class="token property">align-self</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code>

The following video clip shows the subscription form layout adjusting as the width is reduced.