I have been struggling with grid divs children adjusting when I zoom in all the divs overflow, when I zoom out they add more space in between themselves plus How can I adjust width and height of the div so that it affects the next div. Whenever I try to adjust the width of one the divs It creates spaces in between its self and next div, yet I want the next div to move with div am adjusting.
here is my html code.
body {
background-color: #e2e8f0;
padding: 0;
margin: 0;
height: 100%;
}
.griditems1 {
grid-area: sideMenu;
width: 50px;
}
.griditems2 {
grid-area: profile;
}
.griditems3 {
grid-area: projects;
}
.griditems4 {
grid-area: annoucements;
}
.contDash {
display: grid;
grid-template-areas: 'sideMenu profile profile profile' 'sideMenu projects projects annoucements' 'sideMenu projects projects annoucements';
background-color: #2196F3;
gap: 10px;
padding: 10px;
}
.contDash>div {
background-color: rgba(255, 255, 255, 0.8);
padding: 90px;
}<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<main>
<div class="contDash">
<div class="griditems1">
<ul class="nav">
<li class="navItems dashIcon"><img src="icon/view-dashboard-edit.png" alt=""> Dashboard</li>
<li class="navItems"><img src="icon/home.png" alt="">Home</li>
<li class="navItems"><img src="icon/home.png" alt="">Profile</li>
<li class="navItems"><img src="icon/home.png" alt="">Message</li>
<li class="navItems"><img src="icon/home.png" alt="">History</li>
<li class="navItems"><img src="icon/home.png" alt="">Tasks</li>
<li class="navItems"><img src="icon/home.png" alt="">Communities</li>
<li class="navItems"><img src="icon/home.png" alt="">Settings</li>
<li class="navItems"><img src="icon/home.png" alt="">Support</li>
<li class="navItems"><img src="icon/home.png" alt="">Privacy</li>
</ul>
</div>
<div class="griditems2">
</div>
<div class="griditems3">
<div class="projectItems">
</div>
</div>
<div class="griditems4">
</div>
</div>
</main>
</body>
</html>