Mounted-Peak Playing cards: Extra Fragile Than They Look

Mounted-height playing cards usually really feel like a secure selection. A designer palms you a mockup the place each card aligns completely in a grid. The titles are quick, the excerpts match neatly, and the structure seems to be steady throughout all the web page. So that you implement the design precisely as specified and ship it.

All the pieces works till the content material adjustments. An editor updates the copy, a translation provides longer phrases, and a few customers bump their default font dimension, particularly these with low imaginative and prescient or digital eye pressure, simply to make issues simpler to learn.

I bumped into this whereas constructing a “Latest Articles” part for a weblog. The design assumed comparatively quick English titles, so every part match comfortably contained in the mounted top.

The structure seemed stable at first look:

However as soon as the content material modified, the cracks began showing:

Translating the content material to French made issues worse:

German translations pushed the structure even additional:

What as soon as seemed like a steady part turned out to rely on a fragile assumption: that the content material would all the time keep inside a set top.

Right here’s a demo of the structure:

Mounted-Peak Layouts Look Fragile

Within the design specs, the pixel dimensions have been precise, and you already know that playing cards align extra cleanly after they have the identical vertical rhythm and equal dimension, which creates in our thoughts a way of order that I and the designer form of trusted.

So, I set:

.card__title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
  show: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__excerpt {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
  show: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

However surprisingly, the conduct modified as quickly because the font settings modified. I elevated the browser’s default textual content dimension and realized that it launched stress contained in the playing cards. My textual content blocks grew, however the container remained the identical, and parts started competing for a similar house.

Usually, a block aspect merely grows with its content material. However the second I set that top, I broke that relationship. The browser doesn’t deal with this as an issue; it simply resolves the battle the one approach it could possibly, by both letting content material overflow or clipping it.

Within the unique model of the structure, I simply bluntly hid these issues with overflow: hidden.

To make the issue seen, we will take away the security web:

.card__title {
  show: -webkit-box;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 8px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* overflow: hidden; */
}

.card__excerpt {
  show: -webkit-box;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 10px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

With out overflow: hidden, the failure is now not delicate. The content material stops clipping and begins spilling out like groceries from a torn bag. Some excerpts sit proper on the tags, and every part was breaking as soon as we stopped hiding the stress inside the cardboard.

Sadly, the browser has no technique to reconcile these competing directions besides by letting parts collide.

Eradicating the Mounted Peak

Eradicating the constraints that held this structure collectively reveals the place the true drawback lives. Mounted heights, absolute positioning, and grid alignment have been all attempting to regulate the identical factor.

Completely Positioned Actions: Eliminated From Stream

Up so far, the mounted top seems to be like the primary perpetrator to me. However it isn’t appearing alone; the actions on the backside of the cardboard have been completely positioned:

.card__actions {
  place: absolute;
  inset: 0 14px 14px;
}

This appears like a clear resolution; the actions keep pinned to the underside of the cardboard regardless of how lengthy the content material is.

In a typical block structure, a container’s top is decided by the mixed contribution of its in-flow youngsters.

I’m positive you have got seen how completely positioned parts behave. The browser nonetheless renders them, although they now not contribute to the guardian’s intrinsic top. Visually, the actions belong to the cardboard, structurally, the structure ignores them.

To compensate, we reserved house manually:

.card__body {
  padding-block-end: 14px;
}

This padding is admittedly simply an estimate. The second the font dimension will increase, buttons wrap, or translations make the textual content longer, the estimate stops being dependable.

As a substitute of attempting to foretell how a lot house the actions may want, we will let the browser calculate it.

Right here is identical structure with out absolute positioning:

The change is small, however the shift in conduct is kind of noticeable. Even with the mounted top nonetheless in place, the inner rigidity shrinks as a result of the structure is now not working in opposition to itself.

That is the primary structural enchancment. The cardboard nonetheless has an extrinsic top constraint, so the structure isn’t absolutely versatile but.

There’s an Phantasm of Management

If mounted heights act like ceilings, line clamping acts extra like a mute button. Within the unique part, I clamped the title and the excerpt:

.card__title {
  show: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card__excerpt {
  show: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

Clamping feels reassuring to me at the moment as a result of it limits drift and retains playing cards visually aligned. However in observe, that flips the connection.

To essentially see this extra clearly, let’s take away clamping whereas maintaining every part else the identical. This model is an identical to the earlier demo besides that I’ve eliminated all clamping from .card__title and .card__excerpt however left the overflow in order that we will clearly see what occurs.

With out clamping, the strain contained in the part turns into apparent. You see how German card grows taller, and the excerpt wraps naturally. What this actually reveals us is {that a} steady structure shouldn’t depend on overflow: hidden. If a structure solely works as a result of content material is being suppressed, it’s most likely fragile.

Up so far, virtually each failure we’ve seen traces again to a single determination:

.card {
  top: 375px;
}

This one line could look harmless to you, but it surely overrides the browser’s default sizing conduct.

Sooner or later, the best query turns into unavoidable: So what occurs if we simply… cease? Take away the peak totally and let the browser do its factor?

Let’s take away the mounted top whereas maintaining the remainder of the structure intact. Clamping can keep in place since we wish to examine behaviors.

As soon as I restored intrinsic sizing inside the cardboard, the alignment drawback actually turned a grid problem, which brings us to our subsequent refinement.

Let the Grid Deal with Equal Heights

Mounted heights felt interesting. However having equal heights doesn’t truly imply fixing the heights manually. The grid can deal with that alignment for us with out me imposing laborious boundaries on every part.

Generally, the repair is surprisingly small. Eradicating align-items: begin lets the grid gadgets stretch naturally, and switching to a extra versatile column definition helps the structure adapt higher throughout completely different display sizes.

.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

See how the identical structure makes use of intrinsic card heights and versatile grid tracks:

To make the button properly align like we had initially, as a substitute of positioning and reserving house manually:

.card {
  padding: 14px;
  place: relative;
}

We flip the cardboard right into a vertical structure:

.card {
  show: flex;
  flex-direction: column;
  padding: 14px;
}

We’re not going to go deep on flexbox right here, as Kevin Powell has an incredible article on precisely that. However it’s price understanding what’s taking place. Turning the cardboard right into a flex container with flex-direction: column traces every part up vertically from prime to backside.

The following step is eradicating the substitute house that was holding room for the actions:

.card__body {
  padding-block-end: 56px;
  padding-block-start: 10px;
}

That padding was a guess; it solely labored so long as the content material stayed predictable. As a substitute, we let the physique develop naturally:

.card__body {
  show: flex;
  flex-direction: column;
  flex: 1;
  padding-block-start: 10px;
}

The flex: 1 tells the physique to take up no matter house is left after the picture, and the actions have taken what they want.

If the tags want a little bit of respiration room, a easy margin does the job:

.card__tags {
  margin-block-end: 10px;
}

We get a card that appears simply as aligned as in our unique web page, however now the alignment comes from structure move, not from forcing the peak.

Utilizing clamp() for Fluid Typography

Fluid typography with clamp() could make titles scale extra easily throughout viewport sizes:

.card__title {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

If you wish to know extra about clamp(), Pedro Rodriguez’s article on scaling font dimension with CSS clamp() is an efficient learn.

Declaring clamp(1rem, 2vw, 1.25rem) permits the title to scale with the viewport whereas staying inside a secure vary. The font dimension can develop or shrink with the viewport (2vw) however won’t ever go smaller than 1rem or bigger than 1.25rem.

Designing for Failure

Not one of the issues I discussed earlier on this structure appeared whereas I used to be constructing it. The issues appeared solely when some situations modified. Generally a picture didn’t load, which modified the vertical steadiness of the cardboard. And because the viewport narrowed, the textual content needed to wrap extra aggressively.

If you wish to know whether or not a part will maintain up with actual content material, strive placing it underneath excessive situations. A number of easy tweaks are sufficient to disclose the place the structure begins to interrupt or collapse:

• Improve the browser’s default font dimension to see the way it behaves.
• Allow text-only zoom as a substitute of web page zoom to look at the distinction.
• Exchange a title with a single unbroken string or simulate different languages with longer phrases.
• Simulate a lacking picture.
• Shrink the viewport till the textual content begins wrapping aggressively.

Relatively than explaining issues abstractly, we will introduce them straight into the intrinsic-height model of the cardboard.

Stress Check Mode

From the intrinsic-height model, we will add a easy toggle that simulates a number of content material stress circumstances.

Add this button contained in the .demo-toolbar:

  Toggle stress check

Add the next script, too:

const stressBtn = doc.querySelector("#toggleStress");

stressBtn.addEventListener("click on", () => {
  doc.physique.classList.toggle("stress");
});

This script merely listens for clicks on the button and provides or removes a stress class on the . That class acts as a change that turns the stress-test types on and off.

physique.stress .card:nth-child(1) .card__title::after {
  content material: "ExtremelyLongUnbrokenStringWithoutAnySpacesToTestOverflowBehavior";
}

physique.stress .card:nth-child(2) .card__excerpt {
  font-size: 1.1rem;
}

physique.stress .card__media img {
  show: none;
}