grid
fun RenderContext.gridBox( styling: GridParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "grid-box", scope: ScopeContext.() -> Unit = {}, content: Div.() -> Unit): Div
Content copied to clipboard
This component represents a layout component with grid property. That is the `display` property is set to `grid`. Besides that is totally resembles the div 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" }
}Content copied to clipboard
See also
dev.
for a detailed overview about how to define grid layouts
Parameters
styling
a lambda expression for declaring the styling as fritz2's styling DSL
base
optional CSS class that should be applied to the element
id
the ID of the element
prefix
the prefix for the generated CSS class resulting in the form `$prefix-$hash`
content
a lambda expression for setting up the content and events of the `div` element itself