Fastened-Peak Playing cards: Extra Fragile Than They Look

Fastened-height playing cards typically really feel like a protected alternative. A designer fingers you a mockup the place each card aligns completely in a grid. The titles are quick, the excerpts match neatly, and the structure appears to be like secure throughout the complete web page. So that you implement the design precisely as specified and ship it.

Every thing works till the content material adjustments. An editor updates the copy, a translation provides longer phrases, and a few customers bump their default font measurement, 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 “Current Articles” part for a weblog. The design assumed comparatively quick English titles, so all the pieces match comfortably contained in the mounted top.

The structure appeared 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 appeared like a secure part turned out to rely on a fragile assumption: that the content material would at all times keep inside a hard and fast top.

Right here’s a demo of the structure:

Fastened-Peak Layouts Look Fragile

Within the design specs, the pixel dimensions have been actual, and you recognize that playing cards align extra cleanly once they have the identical vertical rhythm and equal measurement, which creates in our thoughts a way of order that I and the designer type 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 habits modified as quickly because the font settings modified. I elevated the browser’s default textual content measurement and realized that it launched strain 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 component 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 method it may, 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 protection internet:

.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 not refined. The content material stops clipping and begins spilling out like groceries from a torn bag. Some excerpts sit proper on the tags, and all the pieces was breaking as soon as we stopped hiding the strain inside the cardboard.

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

Eradicating the Fastened Peak

Eradicating the constraints that held this structure collectively reveals the place the actual drawback lives. Fastened heights, absolute positioning, and grid alignment have been all making an attempt to manage the identical factor.

Completely Positioned Actions: Eliminated From Stream

Up up to now, the mounted top appears to be like 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 answer; the actions keep pinned to the underside of the cardboard irrespective 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 kids.

I’m positive you’ve got seen how completely positioned parts behave. The browser nonetheless renders them, regardless that they not contribute to the father or mother’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 actually simply an estimate. The second the font measurement will increase, buttons wrap, or translations make the textual content longer, the estimate stops being dependable.

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

Right here is similar structure with out absolute positioning:

The change is small, however the shift in habits is kind of noticeable. Even with the mounted top nonetheless in place, the interior pressure shrinks as a result of the structure is not working towards 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 follow, that flips the connection.

To essentially see this extra clearly, let’s take away clamping whereas preserving all the pieces else the identical. This model is similar 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} secure structure shouldn’t depend on overflow: hidden. If a structure solely works as a result of content material is being suppressed, it’s in all probability fragile.

Up up to now, 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 habits.

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

Let’s take away the mounted top whereas preserving 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

Fastened 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 arduous boundaries on every part.

Typically, the repair is surprisingly small. Eradicating align-items: begin lets the grid objects 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 an alternative 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 a terrific article on precisely that. However it’s value realizing what’s occurring. Turning the cardboard right into a flex container with flex-direction: column traces all the pieces up vertically from prime to backside.

The subsequent step is eradicating the synthetic 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 increase 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 respiratory 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 measurement with CSS clamp() is an effective learn.

Declaring clamp(1rem, 2vw, 1.25rem) permits the title to scale with the viewport whereas staying inside a protected vary. The font measurement 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. Typically 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, attempt placing it beneath 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 measurement to see the way it behaves.
• Allow text-only zoom as an alternative 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.

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

Stress Take a look at 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 swap 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;
}