Grid Layout card left justified and right justified fields in same container

[zero1niner]

Just getting started with Layout Card, and trying to find a way to have a 3 column grid, with the horizontal card spanning two columns (see screenshot). I have the weather card where I want it in the 3rd column area, but trying to find out how I can build cards within cards so I can add more functions in the 2 column horizontal card.
Where im stuck right now is trying to figure out how to have one span that has the ‘Good Afternoon’ message as well as the date and time in the same container, similar to the design attached below.

My end goal is to have a tablet design that looks like the attached screenshot

[Stiltjack]

You can use empty buttons in grids or stacks to create spaces.

If you then apply a theme to each button making background and border transparent, they will disappear.

[WallyR (Wally)]

If it is just info, like text and ha-icons, then use a html table in a markdown card.

[hawksj (Sam)]

You’re already using custom:layout-card and want to continue using it?

Have a look at grid-template-areas:

A Complete Guide to CSS Grid | CSS-Tricks

(this is the documentation linked in layout-cards GitHub for the grid layout.

You want something like this:

type: custom:layout-card
layout_type: grid
square: false
cards:
  - type: custom:button-card
    entity: light.living_room
    name: Living Room
    view_layout:
      grid-area: main
    styles:
      card:
        - height: 100px
  - type: custom:button-card
    entity: media_player.living_room
    name: Apple TV
    view_layout:
      grid-area: footer
    styles:
      card:
        - height: 100px
  - type: custom:button-card
    entity: switch.adaptive_lighting_living_room
    view_layout:
      grid-area: sidebar
    styles:
      card:
        - height: 100px
layout:
  grid-template-columns: 40% 30% 30%
  place-items: stretch stretch
  grid-template-rows: auto
  grid-template-areas: |
    "main main sidebar"
    "footer footer footer"

You build the grid layout in the layout-card’s layout section, then place cards into those grid areas with view_layout in the card options. You can see in the grid-template-areas section, I have the footer area spanning three columns and the main area spanning 2. In the example above, you get this: