areas

This function opens a context (GridTemplateContext) to specify the overall layout of a grid layout via the grid-template-areas CSS property for all media devices.

The actual definition for the rows is then done within the GridAreaContext using the GridAreaContext.row function. One can pass in string literals directly of course, but for good reasons consider an approach, where you manage the string based cell names within a type of container like a Map, List or an `object`.

A simple but working call might look like this:

areas { /* it == GridAreaContext.() */
        row("HEADER", "HEADER", "HEADER")
        row("MENU", "CONTENT", "CONTENT")
        row("FOOTER", "FOOTER", "FOOTER")
    }

    // later on in the corresponding child element
    grid { area { "CONTENT" } }
    //             ^^^^^^^
    //             "Bind" the element to the named area in the template!

The former approach has some drawbacks:

• tedious to type (no autocompletion)

• not safe for refactorings (only search + replace is possible)

• easy to introduce typos

• easy to misspell the name in the related `dev.fritz2.components.box` component and therefore break the relation!

That is why it is recommended to use some sort of container for the area names!

Here is one solid approach using an object:

// provide properties for all area names
val grid = object {
    val HEADER: AreaName = "header"
    val SIDEBAR: AreaName = "sidebar"
    val CONTENT: AreaName = "content"
    val FOOTER: AreaName = "footer"
}

// inject the object into the component and use it
areas { /* it == GridAreaContext.() */
    with(grid) { /* it == "grid-object" */
            row(HEADER, HEADER, HEADER) // Type safe and refactoring ready names!
            row(MENU, CONTENT, CONTENT)
            row(FOOTER, FOOTER, FOOTER)
        }
    }

    // inject the object later on in the corresponding child element too
    grid { area { grid.CONTENT } }
    //            ^^^^^^^^^^^^
    //            "Bind" the element to the named area in the template! No misspelling, but ready for refactoring!

See also

Parameters

This function opens a context (GridTemplateContext) to specify the overall layout of a grid layout via the grid-template-areas CSS property for each media device independently.

For a detailed overview and usage recommendations have a look at the variant for all media devices at once!

See also

Parameters