Despite spending hours reading numerous online sources, I am still struggling to fully grasp the CSS/HTML box model. Specifically, I am attempting to create sections with a ratio of 3:2, where 3 represents the width and 2 represents the height. https://i.sstatic.net/lUGnR.png
I have attempted to use SCSS variables to no avail:
.boxProject{
width: 90%;
height: calc((width/3) * 2);
background: purple;
box-shadow: 0 4px 30px rgba(0,0,0,.5);
border-radius: 6px;
}
Furthermore, the Bootstrap grid system is perplexing to me. When I apply the h-100 class, the grid overflows its div container. I have yet to find a solution to make the div 'resizable', particularly on smaller screens where the content stacks vertically, resulting in a narrow width but a long height.
.projectSection{
width: 100%;
height: 100%;
}
#section4 h1 {
margin: auto;
background-image: linear-gradient(to right, #62daf5, #59c8f4, #52aef9, #4586f7);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-family: 'Rubik', sans-serif;
font-weight: bold;
}
.boxProject{
width: 90%;
height: calc((width/3) * 2);
background: purple;
box-shadow: 0 4px 30px rgba(0,0,0,.5);
border-radius: 6px;
}
#section4{
background-color: black;
width: 100%;
height: 100%;
}<div class="container-fluid" id="section4">
<div class="row mt-5">
<div class="col-12">
<h1> My Projects. </h1>
</div>
</div>
<div class="row h-75 w-100 mt-4">
<div class="col-6 col-md-6 col-lg-4 col-xl-4">
<div class="boxProject"> </div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-4">
<div class="boxProject"> </div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-4">
<div class="boxProject"> </div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-4">
<div class="boxProject"> </div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-4">
<div class="boxProject"> </div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-4">
<div class="boxProject"> </div>
</div>
</div>
</div>