Grid
This context interface offers functions to style the container component for grid-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
This function sets the align-content property
This function sets the align-content property for each media device independently.
This function sets the align-items property
This function sets the align-items property for each media device independently.
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.
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.
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.
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.
This function sets the grid-auto-flow property for all media devices.
This function sets the grid-auto-flow property for each media device independently.
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.
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.
This function sets the column-gap property for all media devices.
This function sets the column-gap property for each media device independently.
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.
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.
Function to create the CSS fit-content function.
This convenience function sets the gap for the rows and columns in a grid all at once. for all media devices.
This convenience function sets the gap for the rows and columns in a grid all at once. for each media device independently.
This function sets the justify-content property
This function sets the justify-content property for each media device independently.
This function sets the row-gap property for all media devices.
This function sets the row-gap property for each media device independently.
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.
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.