2
I’m learning to use display:grid; What I want to do is that in the first column there is a blue square on top of a green and the second column is all red. What I have is
https://codepen.io/anon/pen/OjQEzK
Html
<div class="wrapper">
<div class="upperLeft">UpperLeft</div>
<div class="lowerLeft">LowerLeft</div>
<div class="rightColumn">RightColumn</div>
</div>
Css
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.upperLeft {
grid-column: 1;
grid-row: 1;
background: blue;
}
.lowerLeft {
grid-column: 1;
grid-row: 2;
background: green;
}
.rightColumn {
grid-column: 2;
grid-row: 1/2;
background: red;
align-self: strech;
}
But what’s the problem you’re having?
– Diego Marques
The problem was that the second column did not extend throughout the right column of the grid. After a lot of fight I found out that it was only modify in . rightColumn to stay grid-Row: 1/3;
– Big LaoBan