GridWrapper

A GridWrapper is a wrapper banner that only servers the purpose to allow other so called 'Nestable banners' to wrap each other next to each other. This way banners can be placed in a row next to each other and break out from the default column styling.

A GridWrapper can als be wrapped inside another GridWrapper, allowing for an infinite amount of recursive nesting inside of it.

GridWrapper can also be utilized as some sort of section banner, since the background of the wrapper can be changed by either setting on or multiple images as background images or just simply setting a fixed color. If the items in the grid should not be displayed in several rows, the base width of a row can be set to 100% as this sets the row to full size, preventing any other rows next to it to be present.

Structure examples

Take a look at some examples, to further understand the possibilities, of how a GridWrapper can be wrapped.

• Simple grid
• Offset size grid
• Recursive grid

This example shows a possible version of a simple GridWrapper version, with two equivalently sized grid items.

{
   "columns":[
      {
         "basis":"350px",
         "banners":[
            {
               "__typename":"ImageBlock",
               "id":"my-image-block-id"
            }
         ]
      },
      {
         "basis":"350px",
         "banners":[
            {
               "__typename":"TextBlock",
               "id":"my-text-block-id"
            },
            {
               "__typename":"TextBlock",
               "id":"my-text-block-id-2"
            },
            {
               "__typename":"ButtonBlock",
               "id":"my-button-block-id"
            },
            {
               "__typename":"TextBlock",
               "id":"my-text-block-id-3"
            }
         ]
      }
   ],
   "styleOptions":{
      "invertOrderMobile":true
      "background":null
   }
}

Create

Code

{
   "columns":[
      {
         "basis":"220px",
         "banners":[
            {
               "__typename":"ImageBlock",
               "id":"my-image-block"
            }
         ]
      },
      {
         "basis":"220px",
         "banners":[
            {
               "__typename":"TextBlock",
               "id":"my-text-block"
            },
            {
               "__typename":"TextBlock",
               "id":"my-text-block-2"
            }
         ]
      }
   ],
   "styleOptions":{
      "invertOrderMobile":false,
      "background":null
   }
}

Arguments