Create a fully responsive, fluid and nestable grid layout

UIkitGrid(..., gutter = NULL, divider = FALSE, child_width = NULL)

Arguments

...

Slot for an UIkitGridElement.

gutter

Grid gutter (space bewteen elements): "small", "medium", "large" or "collapse".

divider

Whether to separate grid elements with a vertical divider. FALSE by default.

child_width

Set an automatic width for all UIkitGridElement. From "1-2" to "1-6" as well as "auto" and "expand"

Note

Do not forget to wrap UI element in a UIkitGridElement before putting them in a grid layout (see example)!

Examples

if(interactive()){ library(shiny) shiny::shinyApp( ui = UIkitPage( title = "My UIkit application", UIkitGrid( child_width = "expand", gutter = "small", UIkitGridElement( UIkitCard( width = NULL, title = "My card", badge = "test", hover = TRUE, horizontal = FALSE, UIkitCardMedia( src = "https://getuikit.com/docs/images/light.jpg", horizontal = TRUE, position = "left" ), body = "This is the body" ) ), UIkitGridElement( UIkitCard( width = NULL, title = "My card", badge = "test", hover = TRUE, horizontal = FALSE, UIkitCardMedia( src = "https://getuikit.com/docs/images/light.jpg", horizontal = TRUE, position = "left" ), body = "This is the body" ) ), UIkitGridElement( UIkitCard( width = NULL, title = "My card", badge = "test", hover = TRUE, horizontal = FALSE, UIkitCardMedia( src = "https://getuikit.com/docs/images/light.jpg", horizontal = TRUE, position = "left" ), body = "This is the body" ) ) ) ), server = function(input, output) {} ) }