I’ve been trying to put the 3rd container in the free space on the right, like covering the whole height of 1st and 2nd container but fitting right in the free space of their width, and i haven’t achieved it yet.
Here is the code so maybe you could help me:
.container {
background-color: rgb(181, 233, 138);
height: 50vh;
width: 50vw;
}
* {
padding: 0;
margin: 0;
}
.container2 {
background-color: rgb(2, 159, 243);
height: 50vh;
width: 50vw;
}
.container3 {
background-color: rgb(23, 223, 133);
height: 100vh;
width: 50vw;
}<section id="only">
<div class="only container"></div>
<div class="only container2"></div>
<div class="only container3"></div>
</section>>Solution :
Use a proper CSS grid for the task:
* {
padding: 0;
margin: 0;
}
#only {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 100vh;
}
.container {
background-color: rgb(181, 233, 138);
grid-column: 1;
}
.container2 {
background-color: rgb(2, 159, 243);
grid-column: 1;
grid-row: 2;
}
.container3 {
background-color: rgb(23, 223, 133);
grid-column: 2;
grid-row: 1 / 3;
}<section id="only">
<div class="only container"></div>
<div class="only container2"></div>
<div class="only container3"></div>
</section>Find a complete guide to CSS grid here. MDN also has excellent information on CSS grid.