title: Create dynamic number of card elements in shiny flowLayout
body: <p>I like to fill an area in a shiny app with card elements. The items flow into the next row when there is not enough space. This can be achieved with <code>flowLayout</code>. </p>
  
  <p><a href="https://i.stack.imgur.com/C2aqN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C2aqN.png" alt="enter image description here"></a></p>
  
  <p>But I do not know the number of items in advance, so I need to create the card elements in a loop. But when I use lapply inside <code>flowLayout</code> all elements are shown below each other.</p>
  
  <p>How to fix this, so that items are shown in rows next to each other?</p>
  
  <pre><code>library(shiny)
  
  card &lt;- function(.img, .species, .sepal.length) {
    HTML(
      paste0(
        '&lt;div class="card"&gt;
        &lt;img src="', .img, '" style="width:100%"&gt;
        &lt;div class="container"&gt;
        &lt;h4&gt;&lt;i&gt;', .species, '&lt;/i&gt;&lt;/h4&gt;
        &lt;hr&gt;
        &lt;p&gt;Sepal Length: ', .sepal.length, '&lt;/p&gt;
        &lt;/div&gt;
        &lt;/div&gt;')
    )
  }
  
  img.src &lt;- "https://www.plant-world-seeds.com/images/item_images/000/007/023/large_square/iris_baby_blue.jpg?1500653527"
  
  ui &lt;- fluidPage(
    tags$head(tags$style('.card {
                           width: 250px;
                         clear: both;
                         /* Add shadows to create the "card" effect */
                         box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
                         transition: 0.3s;
                         }
                         /* On mouse-over, add a deeper shadow */
                         .card:hover {
                         box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
                         }
                         /* Add some padding inside the card container */
                         .container {
                         width: 250px;
                         padding: 2px 16px;
                         }')),
    uiOutput("cards")
  )
  
  server &lt;- function(input, output, session) {
  
    # This looks as expected
  
    # output$cards &lt;- renderUI({
    #   shiny::flowLayout(
    #     cellArgs = list(
    #       style = "
    #           width: auto;
    #           height: auto;
    #           margin: 5px;
    #           "),
    #     card(img.src,
    #          .species = iris[1, "Species"],
    #          .sepal.length = iris[1, "Sepal.Length"]),
    #     card(img.src,
    #          .species = iris[2, "Species"],
    #          .sepal.length = iris[2, "Sepal.Length"]),
    #     card(img.src,
    #          .species = iris[3, "Species"],
    #          .sepal.length = iris[3, "Sepal.Length"]),
    #     card(img.src,
    #          .species = iris[4, "Species"],
    #          .sepal.length = iris[4, "Sepal.Length"])
    #   )
    # })
  
    # Now elements are below each other when using lapply
  
    output$cards &lt;- renderUI({
      shiny::flowLayout(
        cellArgs = list(
          style = "
          width: auto;
          height: auto;
          margin: 5px;
          "),
        lapply(1:4, function(.x) card(img.src,
                         .species = iris[.x, "Species"],
                         .sepal.length = iris[.x, "Sepal.Length"]))
        )
    })
  }
  
  shinyApp(ui, server)
  </code></pre>