Oh, please excuse me.
The layout doesnât have to be six columns wide. Then of course a grid layout would be the (only) way to go.
If there would be only room for two columns (companion app) the layout should be:
D1 D2
D3
E1 E2
E3 E4
E5 E6
E7 E8
K1 K2
K3 K4
K5
Use a grid layout, use a grid layout, use a grid layout, use a grid layout. Itâs EXACTLY what youâre looking for.
You mean grid-auto-flow: row ?
Will tinker a bit; never used it beforeâŚ
Nope.
If I use custom:grid-layout and specify under layout:
grid-template-columns: repeat(auto-fill, min-content)
it doesnât work (each card stretches full-width).
It works with grid-template-columns: repeat(auto-fill, 200px), but it cuts large cards at 200px - I need the cards to stretch according to their content - they are never the same size.
So: how do I achieve auto-filling (and -fitting) cards?
Maybe itâs the same issue as @Ghafla is having, but why does a grid layout card have such large padding around entities cards and essentially enlarge the card compared to a pure enities card?
Three entities in grid:
Three entities in entities card:
I would like to get the grid to have the same minimal size as the pure entities card. Is that possible?
Hi Bertie,
I tried all kinds of CSS grid- stuff - it is impossible.
And: a grid is not what Iâm looking for since the cards have different widths. With a grid (or standard horizontal) layout the columns are stretched to fit all cards in. This results in some wider columns b/o one wide card with the other cards in that column hanging in limbo with empty space to their right.
What I donât understand is that not even horizontal-stacks in a vertical-stack(-in-card) work. They all cling to an underlying row/column layout. Why? 
The closest I get is with a view of:
type: custom:grid-layout
badges: []
layout:
column-widths: fit-content(16%)
width: 140
card_margin: 3px 1px
max_cols: 6
reflow: true
cards:
- type: custom:layout-card
layout_type: horizontal-layout
layout:
max_width: fit-content
cards:
- type: custom:button-card #D1
but the cards are centered on screen (ugly) and small cards sharing their column with a wide card have this terrible gap on the right.
Using place-items: start wonât help that centered look since all cards are then placed leftmost in their own rowâŚ
m:i!
Itâs not even in the CSS working groupâs draft for version 2 (postponed to version 3).
At least Iâm not the only one looking for such item placement: possibility to insert a newline into a grid
Iâm still after the solution for my layout problem.
@thomasloven: (How) are the options below view_layout templatable?
- type: custom:button-card
template: tmpl_btn_clim
variables:
...
view_layout:
grid-column: >
[[[ var cnt = 0;
if (states[variables.card1].state || states[variables.batt1].state) cnt = cnt + 1;
if (states[variables.card2].state || states[variables.batt2].state) cnt = cnt + 1;
if (states[variables.card3].state || states[variables.batt3].state) cnt = cnt + 1;
if (cnt >2) return 'span 16';
return 'span 14' ]]]
Itâs not part of custom:button-card, so the above javascript doesnât work.
With Jinja2 I donât have access to the button-cardâs variablesâŚ
Is there anything I could do?
Hello, for some time I have this message at the top of my dashboard when I use
layout card
: this view contains multiple cards, but a pinboard can only show 1 card
Iâm not completely sure I exactly follow. But this seems to be âfixableâ by having more columns and have those wide cards span more than 1? My use case is this: I want cards (lets use the new tile card as example) to only be âhalf widthâ when off, so more of them fit on the screen, then when I toggle it on Iâm replacing it by a more elaborate card with controls, having it span 2 columns.
The rest of the cards should reflow / fill in any gaps as well as possible.
Iâm currently using the column based layouts still (horizontal on main view and masonry on the rest), but would like to implement above using grid layout
I have same problem, you have fix?
Really random request but I have a full page picture-element floorplan, all the rooms and lights working fine. But I want to overlap columns on each side of the picture element (as it has a lot of blank space around the floorplan).
Is it possible to get a grid of 3 columns, with the central column the main picture element and a column either side overlapping? Like a 20%, 100%, 20%, but with an overlap so it doesnât exced 100% page width? Picture attached below to make it understandable
I donât know if what youâre asking is possible. But curious, why donât you just size your picture elements card so it doesnât have the extra space at the sides, then place it in the middle column?
Thanks for the reply
I wasnât sure if it was possible, but someone who is a million times better than me might know of a way!
And as for resizing the image, the elements that overlay it are all the same size, so it would mean trimming around 40 images, which, although doable, will take time so was hoping for this way!
Good afternoon. I have been converting my UI over to layout-card because I LOVE the flexibility. Unfortunately I am stuck and after days of searching and testing I cannot seem to get this problem solved. I canât seem to get rid of the blank space between two cards. The problem is itâs lining the cards up by column and row (I use grid) which it should but itâs using the bottom of each card row to start the next row and thatâs leaving a lot of awkward space. What I am trying to do is basically assign cards to their spot in a column but have the rows collapse. Here is what it currently looks like:
Taking a look at Lights iâd like to move those up under action.
This is what my top level layout looks like:
grid-template-columns: 30% 35% 35%
grid-auto-flow: row dense
grid-template-areas: |
"weather action sensors"
"family selected sensors"
"thermo toggles sensors"
mediaquery:
"(max-width: 600px)":
grid-template-columns: 100%
grid-template-areas: |
"weather"
"family"
"action"
"selected"
"sensor"
"footer"
How does one go about creating one of these grid layouts?
I was reading the CSS docs and itâs not very straightforward at all 
grid-template-columns: 50% 50%
grid-auto-flow: row dense
grid-template-areas: |
"tl tr"
"ml mr"
"foot foot"
Thanks and then I would need to add something like:
view_layout:
grid-area: foot
To each card while changing the grid-area value to tl, tr, etc?
Yup, thatâs the way
You donât need the grid-auto flow bit, although you might want it to play with spacing etc.
So it sort of works, but the footer card is outside of the screen, how can I limit them to be forced for the 3 rows to be 100% the screen height?
@eggman : you have an error in last line:
"foot footâ
while it should be:
"foot foot"
Note wrong " at the endâŚit took me a while to figure it out why your template doesnât workâŚ(yes, i copy/pastedâŚitâs just a friendly reminderâŚotherway thanks for this template!)
BTWâŚis it possible to define different card width for each line? i mean, like â30% 70%â for âtl trâ and , say, â60% 40%â for âml mrâ ?