Manuel Matuzovic: max() Trickery | CSS-Methods

By the use of a publish by Manuel Matuzović which is by the use of a demo by Temani Afif.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

You’d be doing your self a favor to learn Manuel’s breakdown of all what’s occurring right here, nevertheless it mainly works out to the equal of this longer syntax:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…the place:

• max() acecepts a comma-separated listing of CSS numeric values, the place the utilized worth is the most important (or as MDN places it, the “most optimistic”) one within the set.
• 0px is the primary worth within the set, guaranteeing that the smallest worth is at all times going to be larger than zero pixels.
• (100% - 64rem) is the second “worth” within the set, however is expressed as a calculation (be aware that calc() is pointless) that subracts the the max-width of the component (64rem) from its full out there width (100%). What’s left is the house not taken up by the component.
• ((100% - 64rem) / 2)) divides that remaining house equally since we’re divying it between the inline boundaries of the component.
• max(0px, ((100% - 64rem) / 2)) compares 0px and (100% - 64rem) / 2). The most important worth is used. That’ll be the results of the equation usually, but when 64rem is ever larger than the computed worth of the component’s full 100% width, it’ll lock that worth at zero to make sure it by no means ends in a damaging worth.
• margin-inline is the property that the profitable worth units, which applies margin to the inline sides of the component — that’s the logical shorthand equal to setting the identical worth to the margin-left and margin-right bodily properties.

It’s the identical kind of thought Chris shared some time again that makes use of the CSS max()operate to unravel the “Inside Downside” — a container that helps a full-bleed background coloration whereas constraining the content material inside it with padding.

max(), calc(), margin-inline… that’s plenty of newfangled CSS! And Manuel is correct smack dab in the course of writing about these and different fashionable CSS options over 100 days.

Direct Hyperlink →