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; }