Blox align containers horizontally

[Priscillareagan]

Hello there,

I'm a novice to customizing Blox templates. In the attached screenshot, I want to adjust the layout to make the cards appear side by side. I also want the titles Signups and orders to appear as a title to the card. Can I have suggestions on how I can modify the attached code to do that?

{

"style": "",

"script": "",

"title": "",

"showCarousel": true,

"body": [

{

"type": "Container",

"items": [

{

"type": "Container",

"separator": "true",

"spacing": "medium",

"items": [

{

"type": "TextBlock",

"spacing": "small",

"text": "Signups",

"weight": "bold",

"color": "grey",

"style": {

"padding-left": "20px"

}

},

{

"spacing": "none",

"type": "ColumnSet",

"columns": [

{

"spacing": "medium",

"separator": "true",

"type": "Column",

"items": [

{

"type": "ColumnSet",

"columns": [

{

"type": "Column",

"style": {

"flex-grow": "0"

},

"items": [

{

"spacing": "none",

"type": "TextBlock",

"text": "{panel:Sign ups - Actual}",

"weight": "bold",

"color": "#232a2f",

"size": "extraLarge",

"style": {

"margin": "30px"

}

}

]

},

{

"type": "Column",

"style": {

"flex-grow": "100"

},

"items": [

{

"spacing": "none",

"type": "TextBlock",

"horizontalAlignment": "left",

"text": "Variance:",

"color": "grey",

"size": "small"

},

{

"spacing": "small",

"type": "TextBlock",

"horizontalAlignment": "left",

"text": "vs Budget:",

"color": "grey",

"size": "small"

},

{

"spacing": "none",

"horizontalAlignment": "left",

"type": "TextBlock",

"text": "{panel:Sign ups vs Budget}",

"weight": "bold",

"color": "#72767f",

"size": "medium"

},

{

"spacing": "small",

"type": "TextBlock",

"horizontalAlignment": "left",

"text": "vs RoFo:",

"color": "grey",

"size": "small"

},

{

"spacing": "none",

"horizontalAlignment": "left",

"type": "TextBlock",

"text": "{panel:Signups vs RoFo}",

"weight": "bold",

"color": "#72767f",

"size": "medium"

}

]

}

]

}

]

}

]

},

{

"type": "TextBlock",

"spacing": "small",

"text": "Orders",

"weight": "bold",

"color": "grey",

"style": {

"padding-left": "20px"

}

},

{

"spacing": "none",

"type": "ColumnSet",

"columns": [

{

"spacing": "medium",

"separator": "true",

"type": "Column",

"items": [

{

"type": "ColumnSet",

"columns": [

{

"type": "Column",

"style": {

"flex-grow": "0"

},

"items": [

{

"spacing": "none",

"type": "TextBlock",

"text": "{panel:Orders - Actual}",

"weight": "bold",

"color": "#232a2f",

"size": "extraLarge",

"style": {

"margin": "30px"

}

}

]

},

{

"type": "Column",

"style": {

"flex-grow": "100"

},

"items": [

{

"spacing": "none",

"type": "TextBlock",

"horizontalAlignment": "left",

"text": "Variance:",

"color": "grey",

"size": "small"

},

{

"spacing": "small",

"type": "TextBlock",

"horizontalAlignment": "left",

"text": "vs Budget:",

"color": "grey",

"size": "small"

},

{

"spacing": "none",

"horizontalAlignment": "left",

"type": "TextBlock",

"text": "{panel:Orders vs Budget}",

"weight": "bold",

"color": "#72767f",

"size": "medium"

},

{

"spacing": "small",

"type": "TextBlock",

"horizontalAlignment": "left",

"text": "vs RoFo:",

"color": "grey",

"size": "small"

},

{

"spacing": "none",

"horizontalAlignment": "left",

"type": "TextBlock",

"text": "{panel:Orders vs RoFo}",

"weight": "bold",

"color": "#72767f",

"size": "medium"

}

]

}

]

}

]

}

]

}

]

}

]

}

]

}

Thanks,

Priscilla

[ILLIA]

Hello!

Hope you are doing well.
Kindly ask you to add this styling to the container that includes blocks that needs to be aligned horizontally:

"style": {
    "display": "flex",
    "flex-direction": "row"
}

More information about the approach:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties

Please inform if there are any questions.

Best regards,

[DRay]

Hello @Priscillareagan,

I wanted to follow up to see if the solution offered by @ILLIA worked for you.

If so, please click the 'Accept as Solution' button so that other users with the same questions can find the answer faster. If not, please let us know so that we can continue to help.

Thank you.

[MikeGre]

Hello guys,

I am exploring a similar concept. My example is a bit more simple (for now..)

The script:

{
"style": "",
"script": "",
"showCarousel": false,
"body": [
                {
                "type": "Container",
                "items": [
                               {
                                "type": "TextBlock",
                                "text": "{panel:reload_type}"
                               }
                     ]
              }
        ]
}

I would like to "transpose" {panel:reload_type} as shown in the example below:

I tried @ILLIA 's suggestion but couldn't get there 😕

Ideally, if the above is feasible, i would like to add some other values that will be broken down based on the reload_type

Similarly to a pivot table with a break by, I would say but more beautifully structured..