Summary - Multi-direction card

Build a multi-directional card with logical properties.

Summary — Writing modes and logical properties

In this group you combined writing-mode, logical properties, inset, axes and direction. Writing mode flips the text flow; logical properties work against axes.

Now you will use all of them together: a card that works in both horizontal and vertical layouts. You will design a component that holds its layout even when direction flips.

Exercise Multi-direction card spacing

Write these declarations on the .multi-card selector: margin-inline: 1rem and padding-block: 2rem. Both must live in the same block. Include only these two declarations.

Show example solution

/* card stays multi-direction */
.multi-card {
  margin-inline: 1rem;
  padding-block: 2rem;
}

Exercise RTL-aware layout

Write two declarations on the .news selector: writing-mode: horizontal-tb and direction: rtl. The card stays horizontal but flows right to left. Both declarations must live in the same block.

Show example solution

/* news box stays RTL-aware */
.news {
  writing-mode: horizontal-tb;
  direction: rtl;
}

Test yourself

Which one is a logical property?
- padding-top
- margin-right
- padding-block
- bottom: 10px
Show answer

padding-block — Correct. padding-block is a logical property.

Full-cover overlay

.overlay { position: fixed; ____: 0; }

Show answer

.overlay { position: fixed; inset: 0; }

Next lesson: Sr-only technique

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies