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.