Grid and flex margins

The gap_*() functions adjust the margins of child elements of a tag element with a grid or flex display. Instead of applying margin_*() to each child element, a single gap_*() function is applied to the parent element.

Usage

gap_all(x, ...)

gap_horizontal(x, ...)

gap_vertical(x, ...)

Arguments

x

A tag element or .style pronoun.

...

A number specifying the space between child elements. One of,

• 0

• 1

• 2

• 3

• 4

• 5

  Use name-value pairs to specify breakpoints.

Value

An object of the same type as x.

See also

margin_all() for margins on non flex item elements.

Examples

library(htmltools)

div(
  .style %>%
    flex_display(),
  div(
    .style %>%
      margin_all(2)
  ),
  div(
    .style %>%
      margin_all(2)
  )
)
#> <div class="d-flex">
#>   <div class="m-2"></div>
#>   <div class="m-2"></div>
#> </div>

div(
  .style %>%
    flex_display() %>%
    gap_all(2),
  div(),
  div()
)
#> <div class="d-flex gap-2">
#>   <div></div>
#>   <div></div>
#> </div>