How to format SharePoint gallery cards on more than one line?

Question

edit: It looks that the JSON below works but doesn't adjust the items if the window size changes. It only wraps the cards after a refresh. Is it possible to force the change immediately?

I'm trying to get my gallery view to dynamically show on more than one line depending on the window size. I have a SharePoint Document Library that I'm trying to create a view that will resize the number of cards in a row and shuffle them to the next row(s) instead of continuing to add them Left to Right. I want to be able to scroll down (like a normal page) instead of scrolling left to right to preview each item.

This is the JSON I have so far:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 380,
  "width": 254,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "850px",
      "border-radius": "8px"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$LikesCount]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-likes"
                },
                "children": [
                  {
                    "elmType": "div",
                    "__comment": "DIV 1",
                    "style": {
                      "flex-grow": "1",
                      "display": "flex",
                      "flex-direction": "column",
                      "flex-wrap": "nowrap",
                      "align-items": "center",
                      "max-width": "260px"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "width": "260px",
                          "height": "260px"
                        },
                        "attributes": {
                          "src": "@thumbnail.large"
                        },
                        "customCardProps": {
                          "openOnEvent": "hover",
                          "isBeakVisible": true,
                          "formatter": {
                            "elmType": "img",
                            "attributes": {
                              "src": "@thumbnail.500x500"
                            },
                            "style": {
                              "max-height": "500px"
                            }
                          }
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "__comment": "DIV 2",
                    "style": {
                      "flex-grow": "1",
                      "display": "flex",
                      "flex-direction": "column",
                      "flex-wrap": "nowrap",
                      "align-items": "center",
                      "max-width": "360px",
                      "min-width": "205px"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "txtContent": "Uploader",
                        "style": {
                          "display": "block",
                          "padding-top": "15px"
                        },
                        "attributes": {
                          "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$Author.title]",
                        "style": {
                          "display": "block",
                          "padding-top": "5px"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "__comment": "DIV 3",
                    "style": {
                      "flex-grow": "1",
                      "display": "flex",
                      "flex-direction": "column",
                      "align-items": "center",
                      "margin-top": "5px",
                      "max-width": "310px",
                      "min-width": "155px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "__comment": "RATING & STAR DIV",
                        "style": {
                          "display": "block",
                          "font-size": "15px",
                          "font-weight": "bold",
                          "padding": "2px 12px",
                          "cursor": "pointer"
                        },
                        "attributes": {
                          "class": "ms-fontColor-themePrimary",
                          "title": "=if(indexOf([$LikedBy.email], @me) > -1 , 'Unlike', 'Like')"
                        },
                        "customRowAction": {
                          "action": "setValue",
                          "actionInput": {
                            "LikesCount": "=if(indexOf([$LikedBy.email], @me) > -1, [$LikesCount] - 1, [$LikesCount] + 1)",
                            "LikedBy": "=if(indexOf([$LikedBy.email], @me) > -1, removeFrom([$LikedBy.email], @me), appendTo([$LikedBy.email], @me))"
                          }
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "=if(indexOf([$LikedBy.email] , @me) > -1, 'HeartFill', 'Heart')"
                            },
                            "txtContent": "=' ' + length([$LikedBy])",
                            "style": {
                              "padding-right": "5px",
                              "padding-left": "5px",
                              "padding-top": "15px"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}