diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
index bbcd1994f6..beba429d75 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
@@ -116,3 +116,49 @@ fun StyleBuilder.gridTemplateAreas(vararg rows: String) {
     property("grid-template-areas", rows.joinToString(" ") { "\"$it\"" })
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+fun StyleBuilder.justifySelf(value: String) {
+    property("justify-self", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
+fun StyleBuilder.justifyItems(value: String) {
+    property("justify-items", value)
+}
+
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+fun StyleBuilder.alignSelf(value: String) {
+    property("align-self", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+fun StyleBuilder.alignItems(value: String) {
+    property("align-items", value)
+}
+
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
+fun StyleBuilder.placeSelf(value: String) {
+    property("place-self", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
+fun StyleBuilder.rowGap(value: CSSNumeric) {
+    property("row-gap", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
+fun StyleBuilder.columnGap(value: CSSNumeric) {
+    property("column-gap", value)
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+fun StyleBuilder.gap(value: CSSNumeric) {
+    property("gap", value)
+}
+
+fun StyleBuilder.gap(rowGap: CSSNumeric, columnGap: CSSNumeric) {
+    property("gap", "$rowGap $columnGap")
+}
+
diff --git a/web/core/src/jsTest/kotlin/css/GridTests.kt b/web/core/src/jsTest/kotlin/css/GridTests.kt
index 6759a9f788..cf4b1131e4 100644
--- a/web/core/src/jsTest/kotlin/css/GridTests.kt
+++ b/web/core/src/jsTest/kotlin/css/GridTests.kt
@@ -5,6 +5,7 @@
 
 package org.jetbrains.compose.web.core.tests.css
 
+import androidx.compose.runtime.compositionLocalOf
 import org.jetbrains.compose.web.core.tests.runTest
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
@@ -368,3 +369,234 @@ class GridTemplateAreasTests {
         assertEquals("\"head head\" \"nav main\" \"nav foot\"", nextChild().style.asDynamic().gridTemplateAreas)
     }
 }
+
+class GridJustifyTests {
+    @Test
+    fun justifySelf() = runTest {
+        composition {
+            Div({ style { justifySelf("auto") } })
+            Div({ style { justifySelf("normal") } })
+            Div({ style { justifySelf("stretch") } })
+            Div({ style { justifySelf("center") } })
+            Div({ style { justifySelf("start") } })
+            Div({ style { justifySelf("end") } })
+            Div({ style { justifySelf("flex-start") } })
+            Div({ style { justifySelf("flex-end") } })
+            Div({ style { justifySelf("self-start") } })
+            Div({ style { justifySelf("self-end") } })
+            Div({ style { justifySelf("left") } })
+            Div({ style { justifySelf("right") } })
+            Div({ style { justifySelf("baseline") } })
+            Div({ style { justifySelf("safe center") } })
+            Div({ style { justifySelf("unsafe center") } })
+            Div({ style { justifySelf("inherit") } })
+            Div({ style { justifySelf("initial") } })
+            Div({ style { justifySelf("revert") } })
+            Div({ style { justifySelf("unset") } })
+        }
+
+        assertEquals("auto", nextChild().style.asDynamic().justifySelf)
+        assertEquals("normal", nextChild().style.asDynamic().justifySelf)
+        assertEquals("stretch", nextChild().style.asDynamic().justifySelf)
+        assertEquals("center", nextChild().style.asDynamic().justifySelf)
+        assertEquals("start", nextChild().style.asDynamic().justifySelf)
+        assertEquals("end", nextChild().style.asDynamic().justifySelf)
+        assertEquals("flex-start", nextChild().style.asDynamic().justifySelf)
+        assertEquals("flex-end", nextChild().style.asDynamic().justifySelf)
+        assertEquals("self-start", nextChild().style.asDynamic().justifySelf)
+        assertEquals("self-end", nextChild().style.asDynamic().justifySelf)
+        assertEquals("left", nextChild().style.asDynamic().justifySelf)
+        assertEquals("right", nextChild().style.asDynamic().justifySelf)
+        assertEquals("baseline", nextChild().style.asDynamic().justifySelf)
+        assertEquals("safe center", nextChild().style.asDynamic().justifySelf)
+        assertEquals("unsafe center", nextChild().style.asDynamic().justifySelf)
+        assertEquals("inherit", nextChild().style.asDynamic().justifySelf)
+        assertEquals("initial", nextChild().style.asDynamic().justifySelf)
+        assertEquals("revert", nextChild().style.asDynamic().justifySelf)
+        assertEquals("unset", nextChild().style.asDynamic().justifySelf)
+    }
+
+    @Test
+    fun justifyItems() = runTest {
+        composition {
+            Div({ style { justifyItems("normal") } })
+            Div({ style { justifyItems("stretch") } })
+            Div({ style { justifyItems("center") } })
+            Div({ style { justifyItems("start") } })
+            Div({ style { justifyItems("end") } })
+            Div({ style { justifyItems("flex-start") } })
+            Div({ style { justifyItems("flex-end") } })
+            Div({ style { justifyItems("self-start") } })
+            Div({ style { justifyItems("self-end") } })
+            Div({ style { justifyItems("left") } })
+            Div({ style { justifyItems("right") } })
+            Div({ style { justifyItems("baseline") } })
+            Div({ style { justifyItems("safe center") } })
+            Div({ style { justifyItems("unsafe center") } })
+            Div({ style { justifyItems("inherit") } })
+            Div({ style { justifyItems("initial") } })
+            Div({ style { justifyItems("revert") } })
+            Div({ style { justifyItems("unset") } })
+        }
+
+        assertEquals("normal", nextChild().style.asDynamic().justifyItems)
+        assertEquals("stretch", nextChild().style.asDynamic().justifyItems)
+        assertEquals("center", nextChild().style.asDynamic().justifyItems)
+        assertEquals("start", nextChild().style.asDynamic().justifyItems)
+        assertEquals("end", nextChild().style.asDynamic().justifyItems)
+        assertEquals("flex-start", nextChild().style.asDynamic().justifyItems)
+        assertEquals("flex-end", nextChild().style.asDynamic().justifyItems)
+        assertEquals("self-start", nextChild().style.asDynamic().justifyItems)
+        assertEquals("self-end", nextChild().style.asDynamic().justifyItems)
+        assertEquals("left", nextChild().style.asDynamic().justifyItems)
+        assertEquals("right", nextChild().style.asDynamic().justifyItems)
+        assertEquals("baseline", nextChild().style.asDynamic().justifyItems)
+        assertEquals("safe center", nextChild().style.asDynamic().justifyItems)
+        assertEquals("unsafe center", nextChild().style.asDynamic().justifyItems)
+        assertEquals("inherit", nextChild().style.asDynamic().justifyItems)
+        assertEquals("initial", nextChild().style.asDynamic().justifyItems)
+        assertEquals("revert", nextChild().style.asDynamic().justifyItems)
+        assertEquals("unset", nextChild().style.asDynamic().justifyItems)
+    }
+}
+
+
+class GridAlignSelfTests {
+    @Test
+    fun alignSelf() = runTest {
+        composition {
+            Div({ style { alignSelf("auto") } })
+            Div({ style { alignSelf("normal") } })
+            Div({ style { alignSelf("stretch") } })
+            Div({ style { alignSelf("center") } })
+            Div({ style { alignSelf("start") } })
+            Div({ style { alignSelf("end") } })
+            Div({ style { alignSelf("flex-start") } })
+            Div({ style { alignSelf("flex-end") } })
+            Div({ style { alignSelf("self-start") } })
+            Div({ style { alignSelf("self-end") } })
+            Div({ style { alignSelf("baseline") } })
+            Div({ style { alignSelf("safe center") } })
+            Div({ style { alignSelf("unsafe center") } })
+            Div({ style { alignSelf("inherit") } })
+            Div({ style { alignSelf("initial") } })
+            Div({ style { alignSelf("revert") } })
+            Div({ style { alignSelf("unset") } })
+        }
+
+        assertEquals("auto", nextChild().style.asDynamic().alignSelf)
+        assertEquals("normal", nextChild().style.asDynamic().alignSelf)
+        assertEquals("stretch", nextChild().style.asDynamic().alignSelf)
+        assertEquals("center", nextChild().style.asDynamic().alignSelf)
+        assertEquals("start", nextChild().style.asDynamic().alignSelf)
+        assertEquals("end", nextChild().style.asDynamic().alignSelf)
+        assertEquals("flex-start", nextChild().style.asDynamic().alignSelf)
+        assertEquals("flex-end", nextChild().style.asDynamic().alignSelf)
+        assertEquals("self-start", nextChild().style.asDynamic().alignSelf)
+        assertEquals("self-end", nextChild().style.asDynamic().alignSelf)
+        assertEquals("baseline", nextChild().style.asDynamic().alignSelf)
+        assertEquals("safe center", nextChild().style.asDynamic().alignSelf)
+        assertEquals("unsafe center", nextChild().style.asDynamic().alignSelf)
+        assertEquals("inherit", nextChild().style.asDynamic().alignSelf)
+        assertEquals("initial", nextChild().style.asDynamic().alignSelf)
+        assertEquals("revert", nextChild().style.asDynamic().alignSelf)
+        assertEquals("unset", nextChild().style.asDynamic().alignSelf)
+    }
+
+    @Test
+    fun alignItems() = runTest {
+        composition {
+            Div({ style { alignItems("normal") } })
+            Div({ style { alignItems("stretch") } })
+            Div({ style { alignItems("center") } })
+            Div({ style { alignItems("start") } })
+            Div({ style { alignItems("end") } })
+            Div({ style { alignItems("flex-start") } })
+            Div({ style { alignItems("flex-end") } })
+            Div({ style { alignItems("self-start") } })
+            Div({ style { alignItems("self-end") } })
+            Div({ style { alignItems("baseline") } })
+            Div({ style { alignItems("safe center") } })
+            Div({ style { alignItems("unsafe center") } })
+            Div({ style { alignItems("inherit") } })
+            Div({ style { alignItems("initial") } })
+            Div({ style { alignItems("revert") } })
+            Div({ style { alignItems("unset") } })
+        }
+
+        assertEquals("normal", nextChild().style.asDynamic().alignItems)
+        assertEquals("stretch", nextChild().style.asDynamic().alignItems)
+        assertEquals("center", nextChild().style.asDynamic().alignItems)
+        assertEquals("start", nextChild().style.asDynamic().alignItems)
+        assertEquals("end", nextChild().style.asDynamic().alignItems)
+        assertEquals("flex-start", nextChild().style.asDynamic().alignItems)
+        assertEquals("flex-end", nextChild().style.asDynamic().alignItems)
+        assertEquals("self-start", nextChild().style.asDynamic().alignItems)
+        assertEquals("self-end", nextChild().style.asDynamic().alignItems)
+        assertEquals("baseline", nextChild().style.asDynamic().alignItems)
+        assertEquals("safe center", nextChild().style.asDynamic().alignItems)
+        assertEquals("unsafe center", nextChild().style.asDynamic().alignItems)
+        assertEquals("inherit", nextChild().style.asDynamic().alignItems)
+        assertEquals("initial", nextChild().style.asDynamic().alignItems)
+        assertEquals("revert", nextChild().style.asDynamic().alignItems)
+        assertEquals("unset", nextChild().style.asDynamic().alignItems)
+    }
+
+}
+
+class GridGapTests {
+    @Test
+    fun rowGap() = runTest {
+        composition {
+            Div({ style { rowGap(20.px) } })
+            Div({ style { rowGap(1.em) } })
+            Div({ style { rowGap(3.vmin) } })
+            Div({ style { rowGap(0.5.cm) } })
+            Div({ style { rowGap(10.percent) } })
+        }
+
+        assertEquals("20px", nextChild().style.asDynamic().rowGap)
+        assertEquals("1em", nextChild().style.asDynamic().rowGap)
+        assertEquals("3vmin", nextChild().style.asDynamic().rowGap)
+        assertEquals("0.5cm", nextChild().style.asDynamic().rowGap)
+        assertEquals("10%", nextChild().style.asDynamic().rowGap)
+    }
+
+    @Test
+    fun columnGap() = runTest {
+        composition {
+            Div({ style { columnGap(20.px) } })
+            Div({ style { columnGap(1.em) } })
+            Div({ style { columnGap(3.vmin) } })
+            Div({ style { columnGap(0.5.cm) } })
+            Div({ style { columnGap(10.percent) } })
+        }
+
+        assertEquals("20px", nextChild().style.asDynamic().columnGap)
+        assertEquals("1em", nextChild().style.asDynamic().columnGap)
+        assertEquals("3vmin", nextChild().style.asDynamic().columnGap)
+        assertEquals("0.5cm", nextChild().style.asDynamic().columnGap)
+        assertEquals("10%", nextChild().style.asDynamic().columnGap)
+    }
+
+    @Test
+    fun gapOneValue() = runTest {
+        composition {
+            Div({ style { gap(45.px) } })
+        }
+
+        val elStyle = nextChild().style.asDynamic()
+        assertEquals("45px", elStyle.rowGap)
+        assertEquals("45px", elStyle.columnGap)
+    }
+
+    @Test
+    fun gapTwoValues() = runTest {
+        composition {
+            Div({ style { gap(20.px, 30.percent) } })
+        }
+
+        assertEquals("20px 30%", nextChild().style.asDynamic().gap)
+    }
+
+}
\ No newline at end of file