Column Layout height and position

Certified Associate Developer

I'm trying to achieve this kind of display on my interface, but I find it to be difficult.

Is it possible to achieve such effect?

  Discussion posts and replies are publicly visible

Parents
  • {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {},
                        height: "SHORT_PLUS",
                        style: "TRANSPARENT",
                        marginBelow: "STANDARD"
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {},
                        height: "SHORT_PLUS",
                        style: "TRANSPARENT",
                        marginBelow: "STANDARD"
                      )
                    }
                  )
                }
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {},
                        height: "SHORT_PLUS",
                        style: "TRANSPARENT",
                        marginBelow: "STANDARD"
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {},
                        height: "SHORT_PLUS",
                        style: "TRANSPARENT",
                        marginBelow: "STANDARD"
                      )
                    }
                  )
                }
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {},
                height: "TALL",
                style: "TRANSPARENT",
                marginBelow: "STANDARD"
              )
            },
            width: "MEDIUM"
          )
        }
      )
    }

Reply
  • {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {},
                        height: "SHORT_PLUS",
                        style: "TRANSPARENT",
                        marginBelow: "STANDARD"
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {},
                        height: "SHORT_PLUS",
                        style: "TRANSPARENT",
                        marginBelow: "STANDARD"
                      )
                    }
                  )
                }
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {},
                        height: "SHORT_PLUS",
                        style: "TRANSPARENT",
                        marginBelow: "STANDARD"
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {},
                        height: "SHORT_PLUS",
                        style: "TRANSPARENT",
                        marginBelow: "STANDARD"
                      )
                    }
                  )
                }
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {},
                height: "TALL",
                style: "TRANSPARENT",
                marginBelow: "STANDARD"
              )
            },
            width: "MEDIUM"
          )
        }
      )
    }

Children
No Data