Page Comparison

To make the children block simple to configure, we recommend that the layout size differences are part of the configuration of the banner_grid. In the example, we have a list of elements in the parameter “grid” which indicate the number of cols and rows for each element per device (considering a typical 16 cols grid framework like Bootstrap).

To have the same result as in the picture, the grid would need to be:

[
  {
    "col": 12,
    "col-sm": 12,
    "col-md": 6,
    "col-lg": 6,
    "rows": [
      {
        "col": 12,
        "col-sm": 12,
        "col-md": 12,
        "col-lg": 12,
        "rows": []
      },
      {
        "col": 12,
        "col-sm": 12,
        "col-md": 6,
        "col-lg": 6,
        "rows": []
      },
      {
        "col": 12,
        "col-sm": 12,
        "col-md": 6,
        "col-lg": 6,
        "rows": []
      }
    ]
  },
  {
    "col": 12,
    "col-sm": 12,
    "col-md": 6,
    "col-lg": 6,
    "rows": []
  }
]

We recommend to loop through the structure to define automatically the order of the banner index, which would do a mapping like this (the number beint the index of the banner in the children block: