Мобильная версияI am trying to create a layout like
, but when I try to create it, I am not getting the layout correctly if I give height to the grid elements.
As per my understanding, grid elements stretch by default to fill in the grid area they are assigned to. Can someone point me in the right direction as to why I am getting this weird behavior?
In dev tools I see message
The display: block property prevents grid-column-end from having an effect.
But aren't all the children of a 'Grid' container supposed to be a grid item, and their display property does not matter?
* { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; height: 100vh; } .container { width: 600px; height: 400px; background-color: darkslategray; display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; } .item { width: 100%; height: 50px; /* remove this line and it works */ } .item1 { background-color: #0c9e9d; grid-area: 1 / 1 / 4 / 2; } .item2 { background-color: #2ecc71; grid-area: 1 / 2 / 2 / 4; } .item3 { background-color: #9b59b6; grid-area: 1 / 4 / 2 / 5; } .item4 { background-color: #3498db; grid-area: 2 / 4 / 4 / 5; } .item5 { background-color: #f1c40f; } .item6 { background-color: #e67e22; } .item7 { background-color: #e74c3c; } .item8 { background-color: lightskyblue; } ''' Title '''
Источник: https://stackoverflow.com/questions/778 ... grid-items
