Sass math.ceil() Function

What You’ll Learn

math.ceil() is a bounding helper in the sass:math module. It rounds a number up to the next highest whole number and keeps CSS units. You will learn module loading, how ceiling differs from floor and round, compiler notes, and five compiled SCSS examples.

What Is math.ceil()?

Ceiling means “round toward positive infinity”—always up to the next whole number if there is any fractional part. Whole numbers are left alone.

• math.ceil(4) → 4
• math.ceil(4.2) → 5
• math.ceil(4.9) → 5
• math.ceil(-4.2) → -4 (still toward +infinity)

Use it when undershooting is worse than overshooting—for example how many columns you need, how many tiles fit a row, or a pixel size that must never be too small after division.

📝 Syntax

Load the math module, then call the function:

@use "sass:math";

math.ceil($number)

Parameters

Return value

📦 Loading sass:math

Like other math helpers, load the module with @use so the call is clearly namespaced.

// Recommended — namespaced
@use "sass:math";
$cols: math.ceil(4.2);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$cols: ceil(4.2);

// Optional — custom namespace
@use "sass:math" as m;
$cols: m.ceil(4.2);

📏 How Units Work

math.ceil() rounds the numeric part and keeps the unit attached.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS is always plain numbers.

Prefer Dart Sass for new work. Older pipelines may still expose the global ceil() name.

Examples Gallery

Each example uses @use "sass:math". Open View Compiled CSS to see what Dart Sass emits.

@use "sass:math";

@debug math.ceil(4);    // 4
@debug math.ceil(4.2);  // 5
@debug math.ceil(4.9);  // 5

.panel {
  width: math.ceil(119.2px);
}

.panel {
  width: 120px;
}

@use "sass:math";

$gap: 1.25rem;
$share: 33.3%;

.card {
  margin-block: math.ceil($gap);
  flex-basis: math.ceil($share);
}

.card {
  margin-block: 2rem;
  flex-basis: 34%;
}

@use "sass:math";

@debug math.ceil(-4.2);  // -4
@debug math.ceil(-4);    // -4

.offset {
  // -3.7px → -3px (toward +infinity)
  margin-top: math.ceil(-3.7px);
}

.offset {
  margin-top: -3px;
}

@use "sass:math";

$items: 10;
$per-row: 3;
$rows: math.ceil(math.div($items, $per-row)); // ceil(3.333…) → 4

.gallery {
  // illustrative custom property for demos
  --rows: #{$rows};
  grid-template-rows: repeat(#{$rows}, auto);
}

.gallery {
  --rows: 4;
  grid-template-rows: repeat(4, auto);
}

@use "sass:math";

$base: 7.5px;

@for $i from 1 through 3 {
  .space-#{$i} {
    margin-bottom: math.ceil($base * $i);
  }
}

.space-1 { margin-bottom: 8px; }
.space-2 { margin-bottom: 15px; }
.space-3 { margin-bottom: 23px; }

🚀 Real-World Use Cases

• Column / row counts — after division, ceil so leftover items still get a track.
• Minimum pixel sizes — round fractional widths up so content is never clipped short.
• Tile and card grids — guarantee enough slots for every item.
• Spacing scales — snap fractional steps up to whole CSS lengths.
• Pagination math — page count is almost always a ceiling of items ÷ page size.
• Paired with floor/round — pick the bounding rule that matches your design contract.

⚠️ Common Pitfalls

• Forgetting @use — math.ceil is undefined until you load sass:math.
• Confusing ceil with “away from zero” — math.ceil(-4.2) is -4, not -5.
• Using ceil when floor is needed — overshooting can break max-width layouts; pick the right bound.
• Expecting runtime behavior — changing a CSS variable later will not re-run Sass math.ceil.
• LibSass pipelines — built-in modules need Dart Sass; migrate or use global ceil() carefully.

💡 Best Practices