gridBox

fun RenderContext.gridBox(styling: GridParams.() -> Unit = {}, baseClass: StyleClass? = null, id: String? = null, prefix: String = "grid-box", init: Div.() -> Unit): Div

This component represents a layout component with grid property. That is the `display` property is set to `grid`. Besides that is totally resembles the box component

Example usage:

gridBox({
/* you can use grid styling properties for the _parent_ */
columns {
// create a grid with always seven cells per row, each one fraction of the container size
repeat(7) { "1fr" }
}
gap { normal }
/* further styles */
border {
color { dark }
size { normal }
style { solid }
}
}) {
p { +"Some content in the box" }
}

See also

dev.fritz2.styling.params.GridLayout

for a detailed overview about how to define grid layouts

Parameters

baseClass

optional CSS class that should be applied to the element

id

the ID of the element

init

a lambda expression for setting up the content and events of the `div` element itself

prefix

the prefix for the generated CSS class resulting in the form `$prefix-$hash`

styling

a lambda expression for declaring the styling as fritz2's styling DSL