in grid-layout, how can I remove the space between the cards?
from the linked CCS guide:
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
column-gap: 10px;
row-gap: 15px;
}
I would appreciate some help with the following problem. I want to have on a Samsung Tab A7 (according to the specifications is 2000 x 1200 pixels) my dashboard in full screen. I have tried many things but with the current settings I just canāt get it done. The screen is filled full width but at the bottom I always keep a bit of screen left (about 20%). That remains black.How do I adjust my yaml so that the whole screen is filled and it may even be scalable and it also looks the same on a laptop (1920 x 1080) in full screen.
I use Fully Kiosk Browser (pro) on my tablet in Kiosk mode (landscape).
I have greatly simplified the yaml below. In reality both the sidebar and the main screen are filled with data. On the sidebar buttons to navigate and on the main screen the state of the property etc. Note that the text under the time is also not quite aligned properly here, whereas it is in the original.
square: false
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 20% 80%
grid-template-rows: auto
grid-template-areas: |
"sidebar main"
cards:
- type: picture-elements
image: /local/plan/sidebar.png
tap_action:
action: none
hold_action:
action: none
view_layout:
grid-area: sidebar
elements:
- type: state-label
entity: sensor.time
hold_action:
action: none
style:
color: rgba(255, 255, 255, 0.8)
font-size: 5.41vw
font-weight: 3100
left: 1.7%
letter-spacing: '-0.05vw'
max-width: 1px
top: 8%
tap_action:
action: none
- type: state-label
entity: sensor.date_long
hold_action:
action: none
style:
color: rgba(255, 255, 255, 0.7)
font-size: 1.3vw
font-weight: 600
left: 20.3%
letter-spacing: '-0.05vw'
text-align: left justified
top: 16%
width: 30%
tap_action:
action: none
- type: picture-elements
image: /local/plan/main.png
tap_action:
action: none
hold_action:
action: none
view_layout:
grid-area: main
elements:
- type: image
entity: sun.sun
tap_action: none
hold_action: none
state_image:
above_horizon: /local/plan/transparant.png
below_horizon: /local/plan/testhouse.png
style:
mix-blend-mode: lighten
opacity: ${ states['sensor.sunlight_opacity'].state }
left: 50%
top: 45%
width: 100%
I do not really mind the gap between the sidebar and the main area but I would not be bad if it was a little smaller tough.
is there a way to set the gap card width?
Use āgrid-column-gap: 1%ā or āgrid-column-gap: 10pxā
I didnāt find a way to remove the gap completely yet.
Did you try 0px instead of 1% and 10px. I wonder, why 0px should not work, if 10px is working. I just tried it locally and grid-gap: 0px is working.
For me it doesnāt work. 0px and 1px makes no difference. But perhaps this has something to do with the problem Iām facing and my lack of knowledge of CCS etc. As stated yesterday on this forum.
If you have still space with 0px, this is most proably not the grid-gap, but the margin from the cards/elements inside the grid div. You can see this in the inspector, if you have a look in the grid:
#root > * {
margin: var(--masonry-view-card-margin, 4px 4px 8px);
}
At at least here, there is a variable used and the easiest is to set this one, e.g.
cards:
- type: entities
card_mod:
style: |
:host {
--masonry-view-card-margin: 0px;
}
view_layout:
grid-area: abc
card_mod is needed of course.
2 Likes
Yes, that solved the less important part of my problem. But I still didnāt figure out how to fill my Samsung Tab A7 completely with those two columns. I still have a part of the tablet left black. Letās say the bottom 20 %. Card_mod with height and width didnāt help there yet.
Isnāt it just simple the height of the content, which currently sets the height in your case?
You could try to set the row height fixed (and perhaps with fitting media query to your tablet) fitting to your device.
so, e.g.
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 20% 80%
grid-auto-rows: 1000px
grid-template-areas: |
"sidebar main"
as a staring point to play around
Thanks, I will try playing with that. And to be honest I donāt know what currently sets the height. I use a picture-elements card and was under the impression that that would determine the size of the picture shown.
Just a quick one and want to see if itās by design?
I have setup a grid layout. 3 columns so sidebar, main1 and main2
However as soon as Iāve done that I have lost the ability to edit any cards via the UI and have to use the raw editor. Is this the same for others?
No, it isnāt.
Cool. Seems my layout switched to having nothing selected. Once I selected grid the edit buttons returned. Makes things so much easier.
I tried adding CSS to the layout-card, but the style isnāt added to the DOM:
type: custom:layout-card
layout_type: custom:horizontal-layout
cards: ......
card_mod:
style: |
#columns {
column-gap: 32px;
}
How do I use card-mod with layout-card? Thanks.
Ran into an issue with my Grid Card. The spacing looks like there is an extra carriage return before each markdown commentā¦but that isnāt the case unless itās in the card? Any thoughts on how to put the text back in their rows?
Code:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 90px 170px
margin: 0px 0px 0px 0px
gap: 0px 0px
grid-template-rows: 30px 30px 30px 30px
grid-template-areas: |
"photo1 presence1"
"photo1 change1"
"photo1 commute1"
"photo1 phone1"
cards:
- type: picture
image:
view_layout:
grid-area: photo1
- type: markdown
content: |
Commute: {{ states ('sensor.waze_travel_time') }} mins
view_layout:
grid-area: presence1
- type: markdown
content: |
Commute: {{ states ('sensor.waze_travel_time') }} mins
view_layout:
grid-area: change1
- type: markdown
content: |
Commute: {{ states ('sensor.waze_travel_time') }} mins
view_layout:
grid-area: commute1
I have the same issue. I want to put a border around a layout-card, but try as I might, I canāt. I can put a border around a button-card no problem:
And of course, I stumble upon the solution a few tries later:
- type: custom:mod-card
style: |
ha-card {
border: solid 2px var(--primary-color) !important;
}
view_layout:
grid-column: 4 / span 2
grid-row: span 2
card:
type: custom:layout-card
1 Like
Hi all,
Hope someone can advise whether layout-card will do what Iām trying to achieve.
What I want is a multi-column (2 columns in my use case) Entities Card.
It would function identically to the HASS Entities Card with a title but then layout the entities across the number of specified columns rather than vertically in a single column.
Ideally you could specify a ānullā entity to leave a column position blank.
Any guidance most appreciated.
A layout-card with the grid-layout is what you are looking for. Example immediately above your post.