My experience with using grid is still quite fresh. Although I've completed a few projects, I'm struggling with some issues. One of them involves setting the grid element to 100%, but it seems to be getting clipped at 80%.
It appears like such a simple problem to solve, yet I've spent the last hour trying various solutions without success.
Important to note, I am incorporating a slider element from fomantic, which isn't visible in the code preview due to the small viewpoint.
body{
margin:0;
}
.page-wrapper{
width:100%;
height:100%;
display:grid;
grid-template-columns:10% 40% 20% 10% 5%;
grid-template-rows:4vh auto 2vh auto 6vh;
grid-template-areas:". . . . ."
". page_heading page_heading page_heading ."
". . . . ."
". svg-container . user_controls ."
". . . . .";
}
.page_heading-wrapper{
grid-area:page_heading;
width:100%;
}
.svg-container{
grid-area:svg-container;
}
.user_controls{
grid-area:user_controls;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/components/slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.8/components/slider.min.js"></script>
<div class="page-wrapper">
<div class="page_heading-wrapper"></div>
<div class="svg-container">
<svg class="user_svg_elem" height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" data-path_to_mask />
<path d="M150 0 L74 200 L225 200 Z" data-path_to_mask />
</svg>
</div>
<div class="user_controls ui slider"></div>
</div>