Why CSS Logical Properties Are the Future of Responsive Layouts

This article, translated from Adam Argyle's "Late to Logical," discusses the rapid development of CSS logical properties and their practical applications.

In 2020, the box model description began shifting toward logical properties, offering a more rigorous and language‑agnostic approach to layout that requires less code and improves cross‑browser compatibility.

p {
  /* 🚫 */ text-align: left;
  /* 👍 */ text-align: start;

  /* 🚫 */ margin-top: 1rem;
  /* 👍 */ margin-block-start: 1rem;
}

The property

text-align: start

is a logical CSS property that adapts to the writing direction; while

left

works for left‑to‑right scripts, it fails for right‑to‑left languages like Arabic.

To handle different writing systems, designers must consider the block axis and inline axis instead of physical directions. The image below illustrates Latin, Hebrew, and Japanese scripts.

Logical properties also appear in everyday contexts, such as a ship’s port (left side) and starboard (right side), which remain consistent regardless of the observer’s orientation.

Ship's Port

In maritime terminology, "port" and "starboard" denote the vessel’s logical left and right sides, independent of the viewer’s perspective.

Skier's Left Side

In skiing, "skier’s left" refers to the side left of the skier when facing downhill; using logical direction avoids confusion when the skier’s orientation changes.

Deep Understanding of Logical Properties

Traditional physical properties like

left

,

right

,

top

, and

bottom

depend on the writing mode and can cause layout issues when the mode changes. Logical properties such as

inline-start

and

inline-end

are independent of writing direction.

button {
  padding-block: 1ch;
  padding-inline: 2ch;
  border-inline: 5px solid var(--brand-1);
}

The above button uses logical properties to ensure consistent appearance in any writing mode.

p {
  max-inline-size: 50ch;
  margin-block: 1rem;
}

This demonstrates defining a

p

element with logical properties, emphasizing user‑centered design that works across languages.

hr {
  max-inline-size: 30ch;
  margin-inline: auto;
  border-block-start: 1px solid hsl(2rad 20% 20% / 20%);
}

When defining box models, prefer logical properties over physical ones like

top

and

left

to achieve consistent, language‑agnostic layouts.

Web’s “magic paper” becomes more natural with logical properties, and developers will soon love using them.