I'm struggling to figure out how to make the child content fill the height of a column. I've tried using Bootstrap grid system and flex utilities.
The only solution that somewhat worked was setting the row height to 50%, but the issue is, I don't know how many rows will be in a column (could be 1, 2, or 3 rows):
This is my desired layout:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7e647c6478">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style>
.c1{
background-color: red;
}
.c2{
background-color: rgb(98, 0, 255);
}
.c3{
background-color: rgb(101, 255, 160);
}
.c4{
background-color: rgb(72, 255, 0);
}
.c5{
background-color: rgb(0, 255, 242);
}
.c6{
background-color: rgb(255, 238, 0);
}
.r0{
background-color: rgb(133, 133, 133);
}
.ra{
background-color: rgb(255, 123, 0);
height: 50%;
}
.rb{
background-color: rgb(72, 255, 0);
height: 50%;
}
.rc{
background-color: rgb(255, 0, 191);
}
.rd{
background-color: rgb(240, 255, 24);
}
.re{
background-color: rgb(111, 133, 255);
}
.rf{
background-color: rgb(180, 57, 57);
height: 50%;
}
.rg{
background-color: rgb(91, 206, 110);
height: 50%;
}
</style>
</head>
<body>
<div class="container py-3">
<div class="row r0">
<div class="col c1">
<div class="row ra">a</div>
<div class="row rb">b</div>
</div>
<div class="col c2">2</div>
<div class="col c3">3</div>
<div class="col c4">
<div class="row rc">c</div>
<div class="row rd">d</div>
<div class="row re">e</div>
</div>
<div class="col c5">
<div class="row rf">f</div>
<div class="row rg">g</div>
</div>
</div>
</div>
</body>
</html>Here's what I attempted:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a0baa2baa6">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style>
.c1{
background-color: red;
}
.c2{
background-color: rgb(98, 0, 255);
}
.c3{
background-color: rgb(101, 255, 160);
}
.c4{
background-color: rgb(72, 255, 0);
}
.c5{
background-color: rgb(0, 255, 242);
}
.c6{
background-color: rgb(255, 238, 0);
}
.r0{
background-color: rgb(133, 133, 133);
}
.ra{
background-color: rgb(255, 123, 0);
}
.rb{
background-color: rgb(72, 255, 0);
}
.rc{
background-color: rgb(255, 0, 191);
}
.rd{
background-color: rgb(240, 255, 24);
}
.re{
background-color: rgb(111, 133, 255);
}
.rf{
background-color: rgb(180, 57, 57);
}
.rg{
background-color: rgb(91, 206, 110);
}
</style>
</head>
<body>
<div class="container py-3">
<div class="row r0">
<div class="col c1">
<div class="row ra">a</div>
<div class="row rb">b</div>
</div>
<div class="col c2">2</div>
<div class="col c3">3</div>
<div class="col c4">
<div class="row rc">c</div>
<div class="row rd">d</div>
<div class="row re">e</div>
</div>
<div class="col c5">
<div class="row rf">f</div>
<div class="row rg">g</div>
</div>
</div>
</div>
</body>
</html>And here's the outcome