How to resize grids divs height and width

Issue

This Content is from Stack Overflow. Question asked by AYEBAZIBWE ISHMAEL

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;
}



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.


This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of 
CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.
people found this article helpful. What about you?