🌐 What Is block-size?

The block-size property defines the size of an element in the block direction. The block direction depends on the document’s writing mode:

📦 Syntax

block-size: <length> | <percentage> | auto | max-content | min-content | fit-content();

📌 Understanding Logical Directions

📌 1. Basic Example (Horizontal Writing)

.box {
  block-size: 200px; /* same as height: 200px */
}

📌 2. Vertical Writing Mode Example

.vertical-text {
  writing-mode: vertical-rl;
  block-size: 200px; /* now acts like width */
}

In vertical-rl mode, block direction is horizontal — so block-size expands width.

📌 3. Using Percentages

.panel {
  block-size: 50%;
}

Applies to the block dimension relative to the parent’s block-size (height in horizontal writing).

📌 4. Using Intrinsic Sizing Keywords

.box {
  block-size: max-content;  /* Expand to longest content */
  block-size: min-content;  /* Shrink to smallest */
  block-size: fit-content(300px); /* Fit but clamp */
}

📌 5. Replace Height With Block-Size in Responsive Layouts

.card {
  block-size: 300px;
}

Using logical properties makes your UI future-proof and multilingual-ready.

📌 6. Limiting Block Size

.note {
  min-block-size: 150px;
  max-block-size: 300px;
}

🧪 Real-World Use Cases

1️⃣ Card Component with Consistent Vertical Size

.card {
  block-size: 250px;
  padding: 1rem;
}

2️⃣ Vertical Language Support (Japanese Layout)

.japan {
  writing-mode: vertical-rl;
  block-size: 200px; /* horizontal sizing */
}

3️⃣ Responsive Fullscreen Section

section.full {
  block-size: 100vh;
}

Works just like height, but adjusts for writing modes automatically.

⚠️ Common Mistakes

🔥 Summary

The block-size property is the logical equivalent ofheight in CSS (or width in vertical writing modes). It makes your layout responsive to writing direction, language, and orientation.

Learn more →MDN Docs 📘