diff --git a/build.gradle.kts b/build.gradle.kts
index 69fbd77..4b0640e 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -7,7 +7,7 @@
 }
 
 group = "nl.astraeus"
-version = "1.0.3"
+version = "1.0.4"
 
 repositories {
     mavenCentral()

diff --git a/build.gradle.kts b/build.gradle.kts
index 69fbd77..4b0640e 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -7,7 +7,7 @@
 }
 
 group = "nl.astraeus"
-version = "1.0.3"
+version = "1.0.4"
 
 repositories {
     mavenCentral()
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
new file mode 100644
index 0000000..276d72f
--- /dev/null
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
@@ -0,0 +1,31 @@
+package nl.astraeus.css.properties
+
+fun calc(expression: CalcExpression) = Calc(expression)
+
+infix operator fun CalcExpression.plus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "+",
+  other
+)
+
+infix operator fun CalcExpression.minus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "-",
+  other
+)
+
+interface CalcExpression
+
+class CompoundCalcExpression(
+  val left: CalcExpression,
+  val operator: String,
+  val right: CalcExpression
+): CalcExpression {
+  override fun toString(): String {
+    return "$left $operator $right"
+  }
+}
+
+class Calc(
+  expression: CalcExpression
+) : CssProperty(expression.toString())

diff --git a/build.gradle.kts b/build.gradle.kts
index 69fbd77..4b0640e 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -7,7 +7,7 @@
 }
 
 group = "nl.astraeus"
-version = "1.0.3"
+version = "1.0.4"
 
 repositories {
     mavenCentral()
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
new file mode 100644
index 0000000..276d72f
--- /dev/null
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
@@ -0,0 +1,31 @@
+package nl.astraeus.css.properties
+
+fun calc(expression: CalcExpression) = Calc(expression)
+
+infix operator fun CalcExpression.plus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "+",
+  other
+)
+
+infix operator fun CalcExpression.minus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "-",
+  other
+)
+
+interface CalcExpression
+
+class CompoundCalcExpression(
+  val left: CalcExpression,
+  val operator: String,
+  val right: CalcExpression
+): CalcExpression {
+  override fun toString(): String {
+    return "$left $operator $right"
+  }
+}
+
+class Calc(
+  expression: CalcExpression
+) : CssProperty(expression.toString())
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
index fa3f58a..983de25 100644
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
@@ -10,6 +10,7 @@
 
   override fun css(): String = value
 
+  override fun toString(): String = value
 }
 
 fun text(value: String) = TextProperty(value)

diff --git a/build.gradle.kts b/build.gradle.kts
index 69fbd77..4b0640e 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -7,7 +7,7 @@
 }
 
 group = "nl.astraeus"
-version = "1.0.3"
+version = "1.0.4"
 
 repositories {
     mavenCentral()
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
new file mode 100644
index 0000000..276d72f
--- /dev/null
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
@@ -0,0 +1,31 @@
+package nl.astraeus.css.properties
+
+fun calc(expression: CalcExpression) = Calc(expression)
+
+infix operator fun CalcExpression.plus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "+",
+  other
+)
+
+infix operator fun CalcExpression.minus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "-",
+  other
+)
+
+interface CalcExpression
+
+class CompoundCalcExpression(
+  val left: CalcExpression,
+  val operator: String,
+  val right: CalcExpression
+): CalcExpression {
+  override fun toString(): String {
+    return "$left $operator $right"
+  }
+}
+
+class Calc(
+  expression: CalcExpression
+) : CssProperty(expression.toString())
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
index fa3f58a..983de25 100644
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
@@ -10,6 +10,7 @@
 
   override fun css(): String = value
 
+  override fun toString(): String = value
 }
 
 fun text(value: String) = TextProperty(value)
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
index 9231f62..448dc0a 100644
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
@@ -9,13 +9,15 @@
   PC,
   PRC,
   CM,
-  FR
+  FR,
+  VH,
+  VW
 }
 
 open class Measurement(
   value: String,
   val uom: MeasurementUoM = MeasurementUoM.NONE
-) : CssProperty(value) {
+) : CssProperty(value), CalcExpression {
 
   override fun toString(): String = super.value
 
@@ -25,37 +27,14 @@
     val inherit = Measurement("inherit")
     val normal = Measurement("normal")
 
-    fun fromString(value:String): Measurement = when {
-        value == "0" -> Measurement("0", MeasurementUoM.PX)
-        value.endsWith("px")  -> Measurement(value.slice(0..(value.length-2)), MeasurementUoM.PX)
-      value.endsWith("rel")  -> Measurement(value.slice(0..(value.length-3)), MeasurementUoM.REL)
-        else -> {
-          TODO("Unable to parse $value")
-        }
+    fun fromString(value: String): Measurement = when {
+      value == "0" -> Measurement("0", MeasurementUoM.PX)
+      value.endsWith("px") -> Measurement(value.slice(0..(value.length - 2)), MeasurementUoM.PX)
+      value.endsWith("rel") -> Measurement(value.slice(0..(value.length - 3)), MeasurementUoM.REL)
+      else -> {
+        TODO("Unable to parse $value")
       }
-
-    fun px(nr: Int) = if (nr == 0) {
-      Measurement(
-        "0",
-        MeasurementUoM.PX
-      )
-    } else {
-      Measurement(
-        "${nr}px",
-        MeasurementUoM.PX
-      )
     }
-
-    fun px(nr: Double) = nr.px
-    fun em(nr: Int) = nr.em
-    fun em(nr: Double) = nr.em
-    fun prc(nr: Int) = nr.prc
-    fun prc(nr: Double) = nr.prc
-    fun pc(nr: Int) = nr.pc
-    fun pc(nr: Double) = nr.pc
-    fun cm(nr: Int) = nr.cm
-    fun cm(nr: Double) = nr.cm
-    fun fr(nr: Int) = nr.fr
   }
 }
 
@@ -100,8 +79,10 @@
   get() = Measurement("${this}cm", MeasurementUoM.CM)
 val Int.fr: Measurement
   get() = Measurement("${this}fr", MeasurementUoM.FR)
-
-fun Int.px(): Measurement = Measurement.px(this)
+val Int.vw: Measurement
+  get() = Measurement("${this}vw", MeasurementUoM.VW)
+val Int.vh: Measurement
+  get() = Measurement("${this}vh", MeasurementUoM.VH)
 
 val Double.px: Measurement
   get() = Measurement("${this}px", MeasurementUoM.PX)
@@ -115,8 +96,12 @@
   get() = Measurement("${this}pc", MeasurementUoM.PC)
 val Double.cm: Measurement
   get() = Measurement("${this}cm", MeasurementUoM.CM)
-
-fun Double.px(): Measurement = Measurement.px(this)
+val Double.fr: Measurement
+  get() = Measurement("${this}fr", MeasurementUoM.FR)
+val Double.vw: Measurement
+  get() = Measurement("${this}vw", MeasurementUoM.VW)
+val Double.vh: Measurement
+  get() = Measurement("${this}vh", MeasurementUoM.VH)
 
 open class LineHeight(value: String) : CssProperty(value) {
   companion object {

diff --git a/build.gradle.kts b/build.gradle.kts
index 69fbd77..4b0640e 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -7,7 +7,7 @@
 }
 
 group = "nl.astraeus"
-version = "1.0.3"
+version = "1.0.4"
 
 repositories {
     mavenCentral()
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
new file mode 100644
index 0000000..276d72f
--- /dev/null
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
@@ -0,0 +1,31 @@
+package nl.astraeus.css.properties
+
+fun calc(expression: CalcExpression) = Calc(expression)
+
+infix operator fun CalcExpression.plus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "+",
+  other
+)
+
+infix operator fun CalcExpression.minus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "-",
+  other
+)
+
+interface CalcExpression
+
+class CompoundCalcExpression(
+  val left: CalcExpression,
+  val operator: String,
+  val right: CalcExpression
+): CalcExpression {
+  override fun toString(): String {
+    return "$left $operator $right"
+  }
+}
+
+class Calc(
+  expression: CalcExpression
+) : CssProperty(expression.toString())
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
index fa3f58a..983de25 100644
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
@@ -10,6 +10,7 @@
 
   override fun css(): String = value
 
+  override fun toString(): String = value
 }
 
 fun text(value: String) = TextProperty(value)
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
index 9231f62..448dc0a 100644
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
@@ -9,13 +9,15 @@
   PC,
   PRC,
   CM,
-  FR
+  FR,
+  VH,
+  VW
 }
 
 open class Measurement(
   value: String,
   val uom: MeasurementUoM = MeasurementUoM.NONE
-) : CssProperty(value) {
+) : CssProperty(value), CalcExpression {
 
   override fun toString(): String = super.value
 
@@ -25,37 +27,14 @@
     val inherit = Measurement("inherit")
     val normal = Measurement("normal")
 
-    fun fromString(value:String): Measurement = when {
-        value == "0" -> Measurement("0", MeasurementUoM.PX)
-        value.endsWith("px")  -> Measurement(value.slice(0..(value.length-2)), MeasurementUoM.PX)
-      value.endsWith("rel")  -> Measurement(value.slice(0..(value.length-3)), MeasurementUoM.REL)
-        else -> {
-          TODO("Unable to parse $value")
-        }
+    fun fromString(value: String): Measurement = when {
+      value == "0" -> Measurement("0", MeasurementUoM.PX)
+      value.endsWith("px") -> Measurement(value.slice(0..(value.length - 2)), MeasurementUoM.PX)
+      value.endsWith("rel") -> Measurement(value.slice(0..(value.length - 3)), MeasurementUoM.REL)
+      else -> {
+        TODO("Unable to parse $value")
       }
-
-    fun px(nr: Int) = if (nr == 0) {
-      Measurement(
-        "0",
-        MeasurementUoM.PX
-      )
-    } else {
-      Measurement(
-        "${nr}px",
-        MeasurementUoM.PX
-      )
     }
-
-    fun px(nr: Double) = nr.px
-    fun em(nr: Int) = nr.em
-    fun em(nr: Double) = nr.em
-    fun prc(nr: Int) = nr.prc
-    fun prc(nr: Double) = nr.prc
-    fun pc(nr: Int) = nr.pc
-    fun pc(nr: Double) = nr.pc
-    fun cm(nr: Int) = nr.cm
-    fun cm(nr: Double) = nr.cm
-    fun fr(nr: Int) = nr.fr
   }
 }
 
@@ -100,8 +79,10 @@
   get() = Measurement("${this}cm", MeasurementUoM.CM)
 val Int.fr: Measurement
   get() = Measurement("${this}fr", MeasurementUoM.FR)
-
-fun Int.px(): Measurement = Measurement.px(this)
+val Int.vw: Measurement
+  get() = Measurement("${this}vw", MeasurementUoM.VW)
+val Int.vh: Measurement
+  get() = Measurement("${this}vh", MeasurementUoM.VH)
 
 val Double.px: Measurement
   get() = Measurement("${this}px", MeasurementUoM.PX)
@@ -115,8 +96,12 @@
   get() = Measurement("${this}pc", MeasurementUoM.PC)
 val Double.cm: Measurement
   get() = Measurement("${this}cm", MeasurementUoM.CM)
-
-fun Double.px(): Measurement = Measurement.px(this)
+val Double.fr: Measurement
+  get() = Measurement("${this}fr", MeasurementUoM.FR)
+val Double.vw: Measurement
+  get() = Measurement("${this}vw", MeasurementUoM.VW)
+val Double.vh: Measurement
+  get() = Measurement("${this}vh", MeasurementUoM.VH)
 
 open class LineHeight(value: String) : CssProperty(value) {
   companion object {
diff --git a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt b/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt
index a373e5a..74079ae 100644
--- a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt
@@ -1015,8 +1015,8 @@
   }
 
   fun gridGap(
-    rowGap: Measurement = Measurement.px(0),
-    columnGap: Measurement = Measurement.px(0)
+    rowGap: Measurement = 0.px,
+    columnGap: Measurement = 0.px
   ) {
     props["grid-gap"] = prp(rowGap, columnGap)
   }

diff --git a/build.gradle.kts b/build.gradle.kts
index 69fbd77..4b0640e 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -7,7 +7,7 @@
 }
 
 group = "nl.astraeus"
-version = "1.0.3"
+version = "1.0.4"
 
 repositories {
     mavenCentral()
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
new file mode 100644
index 0000000..276d72f
--- /dev/null
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Calc.kt
@@ -0,0 +1,31 @@
+package nl.astraeus.css.properties
+
+fun calc(expression: CalcExpression) = Calc(expression)
+
+infix operator fun CalcExpression.plus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "+",
+  other
+)
+
+infix operator fun CalcExpression.minus(other: CalcExpression) = CompoundCalcExpression(
+  this,
+  "-",
+  other
+)
+
+interface CalcExpression
+
+class CompoundCalcExpression(
+  val left: CalcExpression,
+  val operator: String,
+  val right: CalcExpression
+): CalcExpression {
+  override fun toString(): String {
+    return "$left $operator $right"
+  }
+}
+
+class Calc(
+  expression: CalcExpression
+) : CssProperty(expression.toString())
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
index fa3f58a..983de25 100644
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/CssProperty.kt
@@ -10,6 +10,7 @@
 
   override fun css(): String = value
 
+  override fun toString(): String = value
 }
 
 fun text(value: String) = TextProperty(value)
diff --git a/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt b/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
index 9231f62..448dc0a 100644
--- a/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/properties/Measurement.kt
@@ -9,13 +9,15 @@
   PC,
   PRC,
   CM,
-  FR
+  FR,
+  VH,
+  VW
 }
 
 open class Measurement(
   value: String,
   val uom: MeasurementUoM = MeasurementUoM.NONE
-) : CssProperty(value) {
+) : CssProperty(value), CalcExpression {
 
   override fun toString(): String = super.value
 
@@ -25,37 +27,14 @@
     val inherit = Measurement("inherit")
     val normal = Measurement("normal")
 
-    fun fromString(value:String): Measurement = when {
-        value == "0" -> Measurement("0", MeasurementUoM.PX)
-        value.endsWith("px")  -> Measurement(value.slice(0..(value.length-2)), MeasurementUoM.PX)
-      value.endsWith("rel")  -> Measurement(value.slice(0..(value.length-3)), MeasurementUoM.REL)
-        else -> {
-          TODO("Unable to parse $value")
-        }
+    fun fromString(value: String): Measurement = when {
+      value == "0" -> Measurement("0", MeasurementUoM.PX)
+      value.endsWith("px") -> Measurement(value.slice(0..(value.length - 2)), MeasurementUoM.PX)
+      value.endsWith("rel") -> Measurement(value.slice(0..(value.length - 3)), MeasurementUoM.REL)
+      else -> {
+        TODO("Unable to parse $value")
       }
-
-    fun px(nr: Int) = if (nr == 0) {
-      Measurement(
-        "0",
-        MeasurementUoM.PX
-      )
-    } else {
-      Measurement(
-        "${nr}px",
-        MeasurementUoM.PX
-      )
     }
-
-    fun px(nr: Double) = nr.px
-    fun em(nr: Int) = nr.em
-    fun em(nr: Double) = nr.em
-    fun prc(nr: Int) = nr.prc
-    fun prc(nr: Double) = nr.prc
-    fun pc(nr: Int) = nr.pc
-    fun pc(nr: Double) = nr.pc
-    fun cm(nr: Int) = nr.cm
-    fun cm(nr: Double) = nr.cm
-    fun fr(nr: Int) = nr.fr
   }
 }
 
@@ -100,8 +79,10 @@
   get() = Measurement("${this}cm", MeasurementUoM.CM)
 val Int.fr: Measurement
   get() = Measurement("${this}fr", MeasurementUoM.FR)
-
-fun Int.px(): Measurement = Measurement.px(this)
+val Int.vw: Measurement
+  get() = Measurement("${this}vw", MeasurementUoM.VW)
+val Int.vh: Measurement
+  get() = Measurement("${this}vh", MeasurementUoM.VH)
 
 val Double.px: Measurement
   get() = Measurement("${this}px", MeasurementUoM.PX)
@@ -115,8 +96,12 @@
   get() = Measurement("${this}pc", MeasurementUoM.PC)
 val Double.cm: Measurement
   get() = Measurement("${this}cm", MeasurementUoM.CM)
-
-fun Double.px(): Measurement = Measurement.px(this)
+val Double.fr: Measurement
+  get() = Measurement("${this}fr", MeasurementUoM.FR)
+val Double.vw: Measurement
+  get() = Measurement("${this}vw", MeasurementUoM.VW)
+val Double.vh: Measurement
+  get() = Measurement("${this}vh", MeasurementUoM.VH)
 
 open class LineHeight(value: String) : CssProperty(value) {
   companion object {
diff --git a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt b/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt
index a373e5a..74079ae 100644
--- a/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt
+++ b/src/commonMain/kotlin/nl/astraeus/css/style/Style.kt
@@ -1015,8 +1015,8 @@
   }
 
   fun gridGap(
-    rowGap: Measurement = Measurement.px(0),
-    columnGap: Measurement = Measurement.px(0)
+    rowGap: Measurement = 0.px,
+    columnGap: Measurement = 0.px
   ) {
     props["grid-gap"] = prp(rowGap, columnGap)
   }
diff --git a/src/commonTest/kotlin/nl/astraeus/css/TestCalcExpression.kt b/src/commonTest/kotlin/nl/astraeus/css/TestCalcExpression.kt
new file mode 100644
index 0000000..65739cf
--- /dev/null
+++ b/src/commonTest/kotlin/nl/astraeus/css/TestCalcExpression.kt
@@ -0,0 +1,19 @@
+package nl.astraeus.css
+
+import nl.astraeus.css.properties.calc
+import nl.astraeus.css.properties.em
+import nl.astraeus.css.properties.minus
+import nl.astraeus.css.properties.plus
+import nl.astraeus.css.properties.px
+import kotlin.test.Test
+
+class TestCalcExpression {
+
+
+  @Test
+  fun testCalcExpression() {
+    val a = calc(10.px + 20.px - 5.em)
+
+    println(a)
+  }
+}