GridLayout

@ExperimentalCoroutinesApi()
interface GridLayout : StyleParams, Alignment

This context interface offers functions to style the container component for grid(https://developer.mozilla.org/en/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)-layouts.

It does not create a grid layout though!

This is done by a special `dev.fritz2.components.gridBox` fabric function that creates a component with the display property already set to `grid`.

So it is recommended to use the provided functions within the styles parameter of `dev.fritz2.components.gridBox`.

This interface offers all the inherited functions of Alignment that corresponds to the CSS alignment module.

In order to get a grid layout to work, you also have to style the child elements. This is done by the Layout.grid function, that brings the special GridContext for this task into the scope.

The following example grid layout...

+----------+----------+----------+
| Header |
+----------+----------+----------+
| Menu | Content |
+----------+----------+----------+
| Footer |
+----------+----------+----------+

... can be defined with these functions:

grid({ /* it == GridStyleParams (sum type of different StyleParams based interfaces including this one) */
columns { repeat(3) { "1fr" } }
autoRows { minmax(100) { auto } }
areas {
row("HEADER", "HEADER", "HEADER")
row("MENU", "CONTENT", "CONTENT")
row("FOOTER", "FOOTER", "FOOTER")
}
gap { normal }
}) {
// child content of the grid container, different _context_, but relation to the _area names_!
box({
grid { area { "HEADER" } }
}) {
text { +"Header" }
}
box({
grid { area { "MENU" } }
}) {
text { +"Menu" }
}
box({
grid { area { "CONTENT" } }
}) {
text { +"Content" }
}
box({
grid { area { "FOOTER" } }
}) {
text { +"Footer" }
}
}

Remember that GridLayout ist only for defining the template of the grid; to combine the child elements with a template you have to use the Layout.grid functions!

See also

Functions

alignContent
Link copied to clipboard
js
open fun alignContent(value: AlignContentValues.() -> AlignContentProperty)
This function sets the align-content propertyExample call:
align-content { flexStart }
open fun alignContent(sm: AlignContentValues.() -> AlignContentProperty? = null, md: AlignContentValues.() -> AlignContentProperty? = null, lg: AlignContentValues.() -> AlignContentProperty? = null, xl: AlignContentValues.() -> AlignContentProperty? = null)
This function sets the align-content property for each media device independently.
alignItems
Link copied to clipboard
js
open fun alignItems(value: AlignItemsValues.() -> AlignItemsProperty)
This function sets the align-items propertyExample call:
align-items { flexStart }
open fun alignItems(sm: AlignItemsValues.() -> AlignItemsProperty? = null, md: AlignItemsValues.() -> AlignItemsProperty? = null, lg: AlignItemsValues.() -> AlignItemsProperty? = null, xl: AlignItemsValues.() -> AlignItemsProperty? = null)
This function sets the align-items property for each media device independently.
areas
Link copied to clipboard
js
open fun areas(value: GridAreaContext.() -> Unit)
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.
open fun areas(sm: GridAreaContext.() -> Unit? = null, md: GridAreaContext.() -> Unit? = null, lg: GridAreaContext.() -> Unit? = null, xl: GridAreaContext.() -> Unit? = null)
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.
autoColumns
Link copied to clipboard
js
open fun autoColumns(value: GridTemplateContext.() -> Property)
This function opens a context (GridTemplateContext) to specify the auto columns layout of a grid layout via the grid-auto-columns CSS property for all media devices.
open fun autoColumns(sm: GridTemplateContext.() -> Property? = null, md: GridTemplateContext.() -> Property? = null, lg: GridTemplateContext.() -> Property? = null, xl: GridTemplateContext.() -> Property? = null)
This function opens a context (GridTemplateContext) to specify the auto columns layout of a grid layout via the grid-auto-columns CSS property for each media device independently.
autoFlow
Link copied to clipboard
js
open fun autoFlow(value: AutoFlowValues.() -> AutoFlowProperty)
This function sets the grid-auto-flow property for all media devices.
open fun autoFlow(sm: AutoFlowValues.() -> AutoFlowProperty? = null, md: AutoFlowValues.() -> AutoFlowProperty? = null, lg: AutoFlowValues.() -> AutoFlowProperty? = null, xl: AutoFlowValues.() -> AutoFlowProperty? = null)
This function sets the grid-auto-flow property for each media device independently.
autoRows
Link copied to clipboard
js
open fun autoRows(value: GridTemplateContext.() -> Property)
This function opens a context (GridTemplateContext) to specify the auto rows layout of a grid layout via the grid-auto-rows CSS property for all media devices.
open fun autoRows(sm: GridTemplateContext.() -> Property? = null, md: GridTemplateContext.() -> Property? = null, lg: GridTemplateContext.() -> Property? = null, xl: GridTemplateContext.() -> Property? = null)
This function opens a context (GridTemplateContext) to specify the auto rows layout of a grid layout via the grid-auto-rows CSS property for each media device independently.
columnGap
Link copied to clipboard
js
open fun columnGap(value: ScaledValueProperty)
This function sets the column-gap property for all media devices.
open fun columnGap(sm: ScaledValueProperty? = null, md: ScaledValueProperty? = null, lg: ScaledValueProperty? = null, xl: ScaledValueProperty? = null)
This function sets the column-gap property for each media device independently.
columns
Link copied to clipboard
js
open fun columns(value: GridTemplateContext.() -> Property)
This function opens a context (GridTemplateContext) to specify the column layout of a grid layout via the grid-template-columns CSS property for all media devices.
open fun columns(sm: GridTemplateContext.() -> Property? = null, md: GridTemplateContext.() -> Property? = null, lg: GridTemplateContext.() -> Property? = null, xl: GridTemplateContext.() -> Property? = null)
This function opens a context (GridTemplateContext) to specify the column layout of a grid layout via the grid-template-columns CSS property for each media device independently.
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
fitContent
Link copied to clipboard
js
open fun fitContent(value: Property): String
Function to create the CSS fit-content function.
gap
Link copied to clipboard
js
open fun gap(value: ScaledValueProperty)
This convenience function sets the gap for the rows and columns in a grid all at once.
open fun gap(sm: ScaledValueProperty? = null, md: ScaledValueProperty? = null, lg: ScaledValueProperty? = null, xl: ScaledValueProperty? = null)
This convenience function sets the gap for the rows and columns in a grid all at once.
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
justifyContent
Link copied to clipboard
js
open fun justifyContent(value: JustifyContentValues.() -> JustifyContentProperty)
This function sets the justify-content propertyExample call:
justify-content { flexStart }
This function sets the justify-content property for each media device independently.
rowGap
Link copied to clipboard
js
open fun rowGap(value: ScaledValueProperty)
This function sets the row-gap property for all media devices.
open fun rowGap(sm: ScaledValueProperty? = null, md: ScaledValueProperty? = null, lg: ScaledValueProperty? = null, xl: ScaledValueProperty? = null)
This function sets the row-gap property for each media device independently.
rows
Link copied to clipboard
js
open fun rows(value: GridTemplateContext.() -> Property)
This function opens a context (GridTemplateContext) to specify the row layout of a grid layout via the grid-template-rows CSS property for all media devices.
open fun rows(sm: GridTemplateContext.() -> Property? = null, md: GridTemplateContext.() -> Property? = null, lg: GridTemplateContext.() -> Property? = null, xl: GridTemplateContext.() -> Property? = null)
This function opens a context (GridTemplateContext) to specify the row layout of a grid layout via the grid-template-rows CSS property for each media device independently.
toString
Link copied to clipboard
js
open fun toString(): String

Properties

lgProperties
Link copied to clipboard
js
abstract val lgProperties: StringBuilder
collects the properties for large screens
mdProperties
Link copied to clipboard
js
abstract val mdProperties: StringBuilder
collects the properties for middle-sized screens
smProperties
Link copied to clipboard
js
abstract val smProperties: StringBuilder
collects the properties for small screens
xlProperties
Link copied to clipboard
js
abstract val xlProperties: StringBuilder
collects the properties for extra-large screens

Inheritors

GridParams
Link copied to clipboard