Is it possible to keep the port view and container automatically adjusting?

//Bar chart
let myChart = document.getElementById('myChart').getContext('2d');
        
//Global Options
Chart.defaults.global.defaultFontFamily = 'Raleway, sans-serif, Arial, Helvetica, AlvaroCondensed';
Chart.defaults.global.defaultFontSize = 11.2;
Chart.defaults.global.defaultFontColor = '#695771';
//How to edit font type (thicker)on x/y axes or disable 90, 80, 70 ... on bar chart? Chart.defaults.global.defaultFontColor = '#F9EDF8';

let massPopChart = new Chart (myChart, {
            type: 'bar',
            data: {
                labels: ['creati', 'inz', 'inspi', 'vooru', 'vast', 'altru'],
                datasets: [{
                    label: 'Punten',
                    data: [90, 60, 40, 29, 79, 55
                    ],
                    backgroundColor: ['#F9EDF8', '#DDC3DA', '#BE9DBB', '#D4ADCE', '#F9EDF8', '#DDC3DA', '#BE9DBB' ],
                    borderWidth: 1,
                    borderColor: '#A283A1',
                    hoverBorderWidth: 1,
                    hoverBorderColor: '#695771'

                }]
            },
            //Targeting different sections adding Title

            options: {
                legend: {
                    display: false
                   
                }
    },
    layout: {//move the chart to left, right etc
        padding: {
            left: 50,
            right: 0,
            bottom: 0,
            top:0
        }
    },
    tooltips: {// todo: reduce size of the tooltips
        enabled: true
    }
            
        });
        
//Radar chart
let myChart1 = document.getElementById('myChart1').getContext('2d');
        
//Global Options
Chart.defaults.global.defaultFontFamily = 'Raleway, sans-serif, Arial, Helvetica, AlvaroCondensed';
Chart.defaults.global.defaultFontSize = 11.2;
Chart.defaults.global.defaultFontColor = '#695771';
let massPopChart1 = new Chart (myChart1, {
            type: 'radar',
            data: {
                labels: ['creati', 'inz', 'inspi', 'vooru', 'vast', 'altru'],
                datasets: [{
                    label: 'Punten',
                    data: [90, 60, 40, 29, 79, 55
                    ],
                    backgroundColor: ['#F9EDF8', '#DDC3DA', '#BE9DBB', '#D4ADCE', '#F9EDF8', '#DDC3DA', '#BE9DBB'],
                    borderWidth: 1,
                    borderColor: '#A283A1',
                    hoverBorderWidth: 1,
                    hoverBorderColor: '#695771'

                }]
            },
            //Targeting different sections adding Title

            options: {
                legend: {
                    display: false
                   
                }
            },
            
        });
        
//Polar area chart
let myChart2 = document.getElementById('myChart2').getContext('2d');
        
//Global Options
Chart.defaults.global.defaultFontFamily = 'Raleway, sans-serif, Arial, Helvetica, AlvaroCondensed';
Chart.defaults.global.defaultFontSize = 11.2;
Chart.defaults.global.defaultFontColor = '#695771';
let massPopChart2 = new Chart (myChart2, {
            type: 'polarArea',
            data: {
                labels: ['creati', 'inz', 'inspi', 'vooru', 'vast', 'altru'],
                datasets: [{
                    label: 'Punten',
                    data: [90, 60, 40, 29, 79, 55
                    ],
                    backgroundColor: ['#F9EDF8', '#DDC3DA', '#BE9DBB', '#D4ADCE', '#F9EDF8', '#DDC3DA', '#BE9DBB'],
                    borderWidth: 1,
                    borderColor: '#A283A1',
                    hoverBorderWidth: 1,
                    hoverBorderColor: '#695771'

                }]
            },
            //Targeting different sections adding Title

            options: {
                legend: {
                    display: true
                   
                }
            },
            
        });
        // Horizonal bar
//Main chart
let myChart3 = document.getElementById('myChart3').getContext('2d');

//Global Options
Chart.defaults.global.defaultFontFamily = 'Raleway, sans-serif, Arial, Helvetica, AlvaroCondensed';
Chart.defaults.global.defaultFontSize = 11.2;
Chart.defaults.global.defaultFontColor = '#695771';
let massPopChart3 = new Chart(myChart3, {
    type: 'horizontalBar',
    data: {
        labels: ['creati', 'inz', 'inspi', 'vooru', 'vast', 'altru'],
        datasets: [{
            label: 'Punten',
            data: [90, 60, 40, 29, 79, 55
            ],
            backgroundColor: ['#F9EDF8', '#DDC3DA', '#BE9DBB', '#D4ADCE', '#F9EDF8', '#DDC3DA', '#BE9DBB'],
            borderWidth: 1,
            borderColor: '#A283A1',
            hoverBorderWidth: 1,
            hoverBorderColor: '#695771'

        }]
    },
    //Targeting different sections adding Title

    options: {
        legend: {
            display: false

        }
    },

});

@font-face {
font-family: AlvaroCondensed;
src: url("AlvaroCondensed.woff") format("woff"), url("AlvaroCondensed.ttf")  format("truetype");
}
@font-face {
font-family: AlvaroCondensed;
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
        url("webfont.woff") format("woff"), /* Modern Browsers */
        url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
        url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}
div {
font-family: Raleway, sans-serif, Arial, Helvetica, AlvaroCondensed;
}

html, body {width: auto!important; overflow-x: hidden!important}


body {
margin: auto 0; /*Remove prebuild browser default CSS*/
font-family: Raleway, sans-serif, Arial, Helvetica, AlvaroCondensed;
display: grid;
background-color: #d0afcf;
font-size: 0.7em; /* Default for the whole page*/
color: rgb(128, 110, 139);
}


/*.zone {
cursor: pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}

/* HEADER */
header {
display: flexbox;
padding: 20px;
margin: 20px;
margin: 0;
}
header h1 {
    font-family: Raleway,sans-serif, Arial;
    text-transform: uppercase;
    font-size: 2em;
    /* margin-top: -0.1em;
margin-bottom: 0.1em; or line-height: default or 150% */
    color: rgb(240, 221, 241);
}

.active {
font: Raleway;
font-style: italic;
/* font-size: 0.7em; */
}


hr {
border-style: dashed;
border-color:rgb(128, 110, 139);
}

h4 {
text-transform: uppercase;
}




/***********************************************************************
*  COVER
**********************************************************************/
.container {
display: flex;
align-items: center;
justify-content: center;
height: auto; 
/*width: 30rem;*/
padding: 20px;
margin: 20px;
}



/***********************************************************************
*  GRID PANEL
**********************************************************************/
.grid-wrapper {
display: grid;
grid-column-gap: 0;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /*Everythin is responsive, it fill 1fr when it is small*/

}

.box > canvas {
    width: 100%;
    padding: 60px;
    margin: 20px;
}

.box {
padding: 20px;
margin: 20px;
border-width: 1px 1px 1px;
border-style: dashed;
border-color:rgb(128, 110, 139);

    
}


/* PARTICULAIR GRID */
.one h1 {
font-family: AlvaroCondensed;
font-size: 3em;
/*Keep the same margins in each box*/
margin-top: 0.5em;
margin-bottom: 0.5em;
text-transform: uppercase;
color: rgb(240, 221, 241);
word-break: break-word;
}

.two h1 {
font-family: AlvaroCondensed;
font-size: 3em;
margin-top: 0.5em;
margin-bottom: 0.5em;
word-break: break-word;
text-transform: uppercase;
}

ol li {
margin-bottom: -20px;
    
}
ol{
padding-left: 0;
margin-left: 15px;
}
/* Primary font */


.five h1 {
font-family: AlvaroCondensed;
font-size: 4em;
margin-top: 0.5em;
margin-bottom: 0.5em;
word-break: break-word;
}




/***********************************************************************
*  FOOTER
**********************************************************************/
/*Sticky navigation
.sticky {
position: fixed;
top: 0;
width:100%;
}
*/
.main-nav {
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: center;
    margin: 0;
}
/*.push {
margin: auto;
}*/

li {
padding: 20px;
}

a {
color: rgb(240, 221, 241);
text-decoration: none;
}


@media only screen and (max-width: 600px) {
.main-nav {
    font-size: 0.5em;
}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard Layout</title>
<!-- add meta data -->
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="preload" href="AlvaroCondensed.woff" as="font" type="font/woff" crossorigin>
</head>
<body>

<header >
<h3 class="anyname active">Sub title of the dashboard</h3>

<h1>Here comes the main titel about the dashboard you're seeing here below etetra</h1>
<hr>
<h4>Here comes the titel of the main chart </h4>

</header>
 

 
<div class="container zone ">
    <canvas id="myChart1"></canvas>
</div>

<div class="zone blue grid-wrapper">
<div class="box one">
    <h4>Here comes titel of the box one </h4>
    <h1>23953</h1>
    <p>It is a long fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. </p>
    
</div>
<div class="box two">
    <h4>Here comes title of another box, here box number three</h4>
    <h1>Something</h1>
    <ol>
    <li>Something number one is</li>
    <li>Something number two is</li>
    <li>Something number three is</li>
    <li>Something number four is</li>
    <li>Something number five is</li>
    <li>Something number six is</li>
    </ol>
</div>
    
<div class="box three">
    <h4>Here comes title of another box, here box number three </h4>
    <div class="container">
    <canvas id="myChart"></canvas>
    </div>
    <p>Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
</div>
<div class="box four">    
    <h4>Here comes title of another box, here box number four </h4>
    <div class="container">
    <canvas id="myChart3"></canvas>
    </div>
    <p>Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
</div>
<div class="box five">
    <h4>Here comes a short titel</h4>
    <h1>Here comes something</h1>
    <p>Ipsum as their default model text</p>
    <hr>
    <h4>Here comes a short titel</h4>
    <h1>Here comes something</h1>
    <p>Ipsum as their default model text</p>
    <hr>
</div>
<div class="box six">
    <h4>Intermediairs/werkgevers met de meesta aanbod vacatures</h4>
    
    <div class="container">
    <canvas id="myChart2"></canvas>
    </div>
    <p>Ipsum as their default model text</p>
</div>
</div>
<footer class="zone green"> 
    <ul class="main-nav sticky">
        <li> <a href="">About</a></li>
        <li> <a href="">Products</a></li>
        <li> <a href="">Out team</a></li>
        <li class="push"> <a href="">Contacts</a></li>
    </ul></footer>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="script.js"></script>
</body>
</html>