JSON spacing issue

[Beth_Culpepper]

I am new to using JSON and found the amazing List-Formatting on GitHub but because I don't know how to manipulate every little bit, I'm having trouble getting it to do what I want.  This is the original code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideColumnHeader": "true",
  "hideSelection": true,
  "tileProps": {
    "hideSelection": true,
    "width": "180",
    "height": "150",
    "formatter": {
      "elmType": "a",
      "attributes": {
        "href": "[$URL]",
        "target": "=if([$NewTab] == true, '_blank', '')"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
          },
          "style": {
            "display": "flex",
            "flex-wrap": "wrap",
            "min-width": "180px",
            "min-height": "150px",
            "margin-right": "10px",
            "margin-top": "10px",
            "box-shadow": "2px 2px 4px darkgrey"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "text-align": "center",
                "margin": "auto"
              },
              "children": [
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "sp-row-title"
                  },
                  "txtContent": "[$Title]"
                },
                {
                  "elmType": "div",
                  "attributes": {
                    "iconName": "[$Icon]",
                    "class": "ms-fontSize-su"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "href": "[$URL]",
      "target": "=if([$NewTab] == true, '_blank', '')"
    },
    "style": {
      "width": "100%"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "width": "100%",
          "min-height": "150px",
          "margin-right": "10px",
          "margin-top": "10px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center",
              "margin": "auto"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title"
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "[$Icon]",
                  "class": "ms-fontSize-su"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

I figured out how to change the color of the tiles.  What I'm struggling with is being able to control the spacing/wrapping of my content.  We want to use this to show steps in our recruiting process and because each step name doesn't wrap to the next line, the arrow icons I applied aren't lined up:

Does anyone know how I can manipulate the JSON to allow the icons to line up all the same?  I tried adding spacing and SharePoint doesn't pick it up correctly.  Thank you in advance!!

[#2 · Accepted solution]

@Beth_Culpepper add a style under the txtContent [$Title] line and set the height to taste.

               "txtContent": "[$Title]",
                "style": {
                  "height": "90px"
                }
              },
   

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

[#3]

Thank you! That worked beautifully!