This contributes to #895
@ -75,4 +75,8 @@ fun StyleBuilder.gridArea(rowStart: String, columnStart: String, rowEnd: String,
property("grid-area", "$rowStart / $columnStart / $rowEnd / $columnEnd")
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
fun StyleBuilder.gridTemplateAreas(vararg rows: String) {
property("grid-template-areas", rows.joinToString(" ") { "\"$it\"" })
@ -206,3 +206,14 @@ class GridAreaTests {
class GridTemplateAreasTests {
@Test
fun gridTemplateAreas() = runTest {
composition {
Div({ style { gridTemplateAreas("head head", "nav main", "nav foot") } })
assertEquals("\"head head\" \"nav main\" \"nav foot\"", (root.children[0] as HTMLElement).style.asDynamic().gridTemplateAreas)