On this fast tip excerpted from Unleashing the Energy of CSS, Stephanie displays how container queries permit us to send resilient elements containing integrated format and elegance variants.

It could appear fairly daring to mention, however container queries permit us to use the “construct as soon as, deploy far and wide” technique. As a design programs engineer, it actually appeals to me so that you could send design gadget elements with integrated format and elegance variants.

To reveal this concept, the picture beneath displays a subscription type. Container queries had been implemented, and the part is proven in a full-width subject throughout the narrower area of the sidebar and on the medium width throughout the content material subject.

Grid is a superb significant other for composing those variants. The use of grid template places, we’re ready to arrange the shape sections with out the will for added markup. On this subscription type part, I’ve recognized 3 grid places: legend, box, and put up. The overlays added within the following video display how the format adjustments around the variants.

Within the code for the subscription type, the <type> part has a category subscription-form and is about because the container. A nested <div> with a category of form-content is what our container queries will then regulate:

.subscription-form {
  container-type: inline-size;
}

On the narrowest default width, the shape is an easy grid stack with an opening implemented:

.form__content {
  show: grid;
  hole: 1rem;
}

The primary container question for the mid-sized format is doing the heavy lifting of constructing the grid template and assigning all the parts to the grid places:

@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend box" 
            "legend put up";
    align-items: heart;
    column-gap: 2rem;
  }

  legend {
    grid-area: legend;
  }

  .form-group {
    grid-area: box;
  }

  button {
    grid-area: put up;
  }
}

The second one, ultimate container question then most effective has to regulate the grid-template-areas definition to horizontally line up the places. Just one further tweak is wanted, which is to realign the Subscribe button to the top place, which visually aligns it to the e-mail enter:

@container (min-width: 700px) {
  .form__content {
    grid-template-areas: 
            "legend box put up";
  }

  button {
    align-self: finish;
  }
}

The next video clip displays the subscription type format adjusting because the width is diminished.

The next CodePen demo supplies a reside instance of this way type format (with “Resize me!” handles).

See the Pen
Container Queries for Subscription Shape by means of SitePoint (@SitePoint)
on CodePen.

As you’ll see, container queries be offering us the aptitude to construct elements that may be reused anyplace.

This text is excerpted from Unleashing the Energy of CSS: Complex Ways for Responsive Consumer Interfaces, to be had on SitePoint Top class.