Hi,
I’m new to HA and I don’t really understand how to create a custom grid. I’ve done a lot of things with adaptations but now I can’t do it…
I’d like it with a grid like this
How I can do it ?
That’s how I started :
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 26% 12% 12% 12% 12% 26%
grid-template-rows: auto
grid-template-areas: |
"col_OuvertureGenerale" "col_OuvertureHaut" "col_OuvertureHaut" "col_OuvertureBas" "col_OuvertureBas" "col_FermetureGenerale"
Thx!
I don’t know if this is the best solution but I did it like this (Example with a simple image) :
square: true
type: grid
cards:
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout: {}
cards:
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 200px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
- square: true
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
cards:
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 100px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 100px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 100px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 100px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
columns: 2
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 200px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
card_mod:
style: |
#root {
width: fit-content;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout: {}
cards:
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 200px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
- square: true
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
cards:
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 100px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 100px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 100px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 100px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
columns: 2
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
height: 200px;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
style: |
ha-card img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
columns: 4
