0

enter image description here

like the picture above. How can I make the most right side column to occupy the row below with the grid system using col-lg-6. The first and second column would be col-lg-6 and the column below would be col-lg-6 too. I am using float right for the very right side column to make something work. But can I make the column like this using display:relative;?

dumb11
  • 129
  • 1
  • 9

1 Answers1

0

Using grid-areas there is a easy way. Try this:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

.parentDiv{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "firstdiv thirddiv" "seconddiv thirddiv";
grid-gap: 10px;
}
.firstdiv{
grid-area: firstdiv;
background: black;
width: 100%;
height: 100px;
}
.seconddiv{
grid-area: seconddiv;
background: green;
width: 100%;
height: 100px;
}
.thirddiv{
grid-area: thirddiv;
background: red;
width: 100%;
height: 100%;
}

</style>
</head>
<body>
<div class="parentDiv">
 <div class="firstdiv">
 </div>
 <div class="seconddiv">
 </div>
 <div class="thirddiv">
 </div>
</div>

</body>
</html>