I have grid area templates but I cannot resize them, If I do the content inside will overlap. So how can resize them to the width and height I want with their content (divs). OR. How well can I resize grid columns and rows with their content apart from using width and height cause it seems not to work out for me. Here is the html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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 class="profileItems">
<div class="pro">
<div>
<img src="icon/magnify.png" alt="">
</div>
<div>
<input type="text">
</div>
</div>
<div class="pro">
<div>
<img src="icon/bell-outline.png" alt=""> <br>
</div>
<div>
<img src="icon/account-cash-outline (1).png" alt="">
</div>
<div>
<h6>The plug</h6>
</div>
</div>
<div class="pro do">
<div>
<img src="icon/account-cash-outline (1).png" alt="">
</div>
<div class="profHi">
<h6>Hi there</h6>
<h6>The plug (@ishmo)</h6>
</div>
</div>
<div class="pro">
<div>
<button>New</button>
</div>
<div>
<button>Upload</button>
</div>
<div>
<button>Share</button>
</div>
</div>
</div>
</div>
<div class="griditems3">
<div>
<h4>Projects</h4>
</div>
<div class="projectItems">
<div class="items 1">
<h6 class="parahed">Super cool project</h6>
<p class="para">Sed tempus ut scelerisque suspedise solictituition nible ert dfarslise fells accumsan nec</p>
<span>
<ul class="icons">
<li><img src="icon/star.png" alt=""></li>
<li><img src="icon/eye.png" alt=""></li>
<li><img src="icon/share-variant-outline.png" alt=""></li>
</ul>
</span>
</div>
<div class="items 1">
<h6 class="parahed">Super cool project</h6>
<p class="para">Sed tempus ut scelerisque suspedise solictituition nible ert dfarslise fells accumsan nec</p>
<span>
<ul class="icons">
<li><img src="icon/star.png" alt=""></li>
<li><img src="icon/eye.png" alt=""></li>
<li><img src="icon/share-variant-outline.png" alt=""></li>
</ul>
</span>
</div>
<div class="items 1">
<h6 class="parahed">Super cool project</h6>
<p class="para">Sed tempus ut scelerisque suspedise solictituition nible ert dfarslise fells accumsan nec</p>
<span>
<ul class="icons">
<li><img src="icon/star.png" alt=""></li>
<li><img src="icon/eye.png" alt=""></li>
<li><img src="icon/share-variant-outline.png" alt=""></li>
</ul>
</span>
</div>
<div class="items 1">
<h6 class="parahed">Super cool project</h6>
<p class="para">Sed tempus ut scelerisque suspedise solictituition nible ert dfarslise fells accumsan nec</p>
<span>
<ul class="icons">
<li><img src="icon/star.png" alt=""></li>
<li><img src="icon/eye.png" alt=""></li>
<li><img src="icon/share-variant-outline.png" alt=""></li>
</ul>
</span>
</div>
<div class="items 1">
<h6 class="parahed">Super cool project</h6>
<p class="para">Sed tempus ut scelerisque suspedise solictituition nible ert dfarslise fells accumsan nec</p>
<span>
<ul class="icons">
<li><img src="icon/star.png" alt=""></li>
<li><img src="icon/eye.png" alt=""></li>
<li><img src="icon/share-variant-outline.png" alt=""></li>
</ul>
</span>
</div>
<div class="items 1">
<h6 class="parahed">Super cool project</h6>
<p class="para">Sed tempus ut scelerisque suspedise solictituition nible ert dfarslise fells accumsan nec</p>
<span>
<ul class="icons">
<li><img src="icon/star.png" alt=""></li>
<li><img src="icon/eye.png" alt=""></li>
<li><img src="icon/share-variant-outline.png" alt=""></li>
</ul>
</span>
</div>
</div>
</div>
<div class="griditems4">
<div class="ann">
<div>
<h4>Annoucements</h4>
</div>
<div class="annItems">
<div class="listann">
<div>
<h5>Site maintenance</h5>
<p class="annpara">eugeuege gfuegfiuwfwi yfig gifgufiuifguf gyfg uyfgufyigu yff yueuug yegeyqiuwq euyeyfeyeyfey</p>
<hr>
</div>
<div>
<h5>Site maintenance</h5>
<p class="annpara">eugeuege gfuegfiuwfwi yfig gifgufiuifguf gyfg uyfgufyigu yff yueuug yegeyqiuwq euyeyfeyeyfey</p>
<hr>
</div>
<div>
<h5>Site maintenance</h5>
<p class="annpara">eugeuege gfuegfiuwfwi yfig gifgufiuifguf gyfg uyfgufyigu yff yueuug yegeyqiuwq euyeyfeyeyfey</p>
</div>
</div>
</div>
<div class="tredHead">
<h4>Trending</h4>
</div>
<div class="annItems">
<div class="annDivs">
<div class="tag">
<div>
<img src="icon/account-cash-outline (1).png" alt="">
</div>
<div>
<ul class="tagperson">
<li>@Ishmo</li>
<li>The plug store</li>
</ul>
</div>
</div>
<div class="tag">
<div>
<img src="icon/account-cash-outline (1).png" alt="">
</div>
<div>
<ul class="tagperson">
<li>@Ishmo</li>
<li>The plug store</li>
</ul>
</div>
</div><div class="tag">
<div>
<img src="icon/account-cash-outline (1).png" alt="">
</div>
<div>
<ul class="tagperson">
<li>@Ishmo</li>
<li>The plug store</li>
</ul>
</div>
</div><div class="tag">
<div>
<img src="icon/account-cash-outline (1).png" alt="">
</div>
<div>
<ul class="tagperson">
<li>@Ishmo</li>
<li>The plug store</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Here is the css code.
*{
box-sizing: border-box;
}
.navItems {
list-style-type: none;
}
body {
background-color: #e2e8f0;
}
.griditems1 {
grid-area: sideMenu;
}
.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;
}
.items {
background-color: green;
}
.projectItems {
display: grid;
grid-template-columns: auto auto;
gap: 30px;
}
.projectItems >div {
border-radius: 5px;
height: 150px;
border-left: 5px solid red;
}
.para {
margin-left: 5px;
margin-top: -24px;
}
.parahed {
margin-left: 5px;
}
.profileItems {
display: grid;
grid-template-columns: auto auto;
gap: 10px;
}
.pro {
display: flex;
align-content: center;
gap: 20px;
background-color: red;
}
.pro >div {
flex-shrink: 3;
}
.ann {
display: grid;
grid-template-rows: auto auto;
gap: 10px;
margin-left: -80px;
}
.annItems {
display: flex;
background-color: yellow;
width: 220px;
border-radius: 7px;
margin-top: -20px;
}
.annDivs {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
margin-bottom: 20px;
}
.icons {
list-style-type: none;
display: flex;
margin-left: 120px;
}
.icons > li {
padding-left: 15px;
}
.annpara {
font-size: 10.8px;
margin-top: -20px;
}
.tag {
display: flex;
justify-content: left;
align-items: center;
margin-left: 35px;
}
.tag > div {
margin: -9px;
}
.tagperson {
list-style-type: none;
font-size: 12px;
}
input {
border-radius: 5px;
border-color: white;
width: 450px;
}
button {
border-radius: 5px;
background-color: blue;
border-color: blue;
color: white;
justify-content: center;
}