Upcoming Discussion - Sections

nope I only grouped 3 cards at a time

Spanning cards over a specified number of grid columns and rows, i.e. card resizing, is in the works! It’s another tough nut to crack because it involves essentially redesigning every card, so please be patient. :grinning:

Would it be possible to have a spacer that simply expands as much as it can; taking up whatever space is leftover? Basically what the Spacer in SwiftUI already does. If there is room left for 3 columns; it takes up 3 columns. If there is no room (like on mobile) it essentially does nothing.

The new Sections layout seems like a very good step in the right direction, grid organization is way better!

What about sizes, alignments, and content adaptation?

Here’s a view I’ve been porting to Sections:

Old:

New:

The view is meant for computers and tablets, so it should stretch out the content as much as possible, rather than cramming it all in the center.
I was able to achieve this in the past with a crazy dance of grids, vertical, and horizontal layouts.
Sections are indeed a great improvement from what I had to do just to keep things in the order and alignment I wanted, and I’m very pleased the graph doesn’t expand weirdly leaving a huge blank appendage under itself, but how to make the items expand nicely?

Here’s another example:


This view is meant for phones, and it works fine on those devices, but it well illustrates how things can get very sparse using Sections.
This is how it’s built:

It has huge amounts of uncollapsed space, most likely due to the map’s position, while this other one with a very similar structure:

Looks working way better:


as long as I keep the forecast and trends last, but if I put it on the side as I’d like to have it on a larger screen:

it leaves a whole orphaned row at the bottom.

I worked around these limits in the past using (or perhaps abusing? :sweat_smile:) vertical and horizontal layouts in great numbers. Hopefully, Sections can help us avoid such structures in the future(?)

I wonder if it’s possible when setting up a new page/view using sections to have a dropdown at the top of the screen that specifies a screen size (computer, tablet, phone) as options and then once each section is populated with the cards that are wanted, the dropdown could be changed and the view rearranged so that each screen type can be customized.

Conditional cards have this ability, so I wondered if this type of feature could be incorporated into sections?

This would allow each sections view/page to appear exactly as needed across a large range of devices / screen sizes.

Just started moving some of my old dashboards to Sections.
Not too difficult - just copy & paste the yaml code across.
One thing I noticed though was that on my old dashboard I had a vertical stack and in that stack there are some things like an auto-entities glance card that isn’t always displayed.
In the old method, this doesn’t show on the dashboard at all. With Sections, it shows a gap in the dashboard where the card would have been. I think we need a “Display if empty” type option for cards in the Sections too.