v2.0 breaking changes - "min_columns" option missing

How to transform code to have cards look the same like with v16 (last release before v2.0.0)?

What I had in a view with panel mode enabled:

type: 'custom:mod-card'
style: |
  ha-card {
    padding: 7px;
    background: none;
  }
card:
  type: 'custom:layout-card'
  layout: horizontal
  min_columns: 2
  max_width: 100%
  cards:
    - type: 'custom:mod-card'
      style: |
        ha-card {
          height: 220px
        }
      card:
        type: button
        tap_action:
          action: navigate
          navigation_path: betriebsstatus
        name: Betriebsstatus
        icon: 'mdi:checkbox-marked-circle'
        hold_action:
          action: none
    - type: 'custom:mod-card'
      ...
      ...

Relevant part: with v2.0 instead of

  type: 'custom:layout-card'
  layout: horizontal
  min_columns: 2
  max_width: 100%
  cards:

I tried

  type: 'custom:layout-card'
  layout_type: horizontal
  layout_options:
    column: 2
    max_width: 100%
  cards:

but the result is not the same: now I have only ONE column on the mobile/smartphone view instead of two next to each other.

“Breaking change” is good to know, but where´s guidance on how to fix things so everything can look the same as before the update? I´m a bit lost…

It seems like min_columns does not exist anymore. How to achieve what that did with v2.0 now?

Look desktop with v16 release (GOOD):

Look desktop after updating to v2.0.0 release without changing anything (BAD):

–> When making above code changes, desktop looks GOOD.

I can adjust the view so on the desktop it looks like before the update. BUT then the mobile view will break:

mobile view with v16 (GOOD):

mobile view with v2.0.0 after applying some code changes (BAD):

–> When making above changes, mobile is broken (missing 2 columns setup).

I always need to balance the UI to have it look good on the desktop and the mobile view at the same time. With v16 this was possible. With v2.0.0 I see no way to achieve the same.

[bcutter]

That is awesome! Now I understand the mediaquery. Depending on screen size you can set additional, individual layout options. Great. I updated all my affected views. Not only they look the same like (on some screens even better than) with v16, there´s also much more flexibility to adjust to different screen sizes, I don´t need to use panel mode anymore and there´s a bit of code reduction (less complexity) too.

Note: grid-template-columns: 'repeat(auto-fill, minmax(300px, 1fr))' did not work for me because it does not create the needed second column on the mobile view. I´ll stay with the less compact but easier to understand variant.

Lucky. Thanks again! Closed 😃

[Jpsy]

Glad that solution helps. grid-layout is definitely the most versatile option as it leverages the full power of CSS grid styles.

You can combine as many mediaqueries as you need. For your 28" you can try:

layout:
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
  grid-template-rows: auto
  mediaquery:
    '(max-width: 600px)':
      grid-template-columns: 1fr 1fr
    '(max-width: 1200px)':
      grid-template-columns: 1fr 1fr 1fr 1fr

A shorthand for 1fr 1fr 1fr 1fr 1fr 1fr would be repeat(6, 1fr)

But what comes closest to your original idea would probably be this very compact solution without any mediaqueries:

layout:
  grid-template-columns: 'repeat(auto-fill, minmax(300px, 1fr))'