Hi friends.
On several occasions I tried to create a grid every time I change something breaks. I’m sure I understand how to put it together but I don’t know how to fix it.
If I have 3 columns and 4 rows and they are proportional this should be the configuration, but if I repeat an element it breaks.
styles:
grid:
- grid-template-areas: |
"icon icon"
"icon icon"
"s s"
"s s"
- grid-template-columns: repeat(3, 1fr)
- grid-template-rows: repeat(4, 1fr)
- align-items: start
Correct example
styles:
grid:
- grid-template-areas: |
"icon icon"
"icon icon"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(3, min-content)
- align-items: start
Wrong example
styles:
grid:
- grid-template-areas: |
"icon icon"
"icon icon"
"s s"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(3, min-content)
- align-items: start