title: Best way of styling CSS
body: <p><a href="https://i.stack.imgur.com/eFCQW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eFCQW.png" alt="enter image description here"></a></p>
  
  <p>I'm using <strong>css grid</strong> and in this case <strong>i have made a div</strong> that fit in a grid (the <strong>green</strong> box)(at the right the color is green not yellow) and <strong>inside this div i have made another grid</strong> (2 columns) and in one at the <strong>left</strong> there is the <strong>image</strong> and <strong>at the right</strong> there is <strong>another div</strong> (the <strong>red</strong> one) <strong>with a paragraph.</strong><br></p>
  
  <p>As you can see i have used and height of 61vh otherwise the image doesn't fit well and than i had to set also an height for the red box otherwise it goes outside of the green box.<a href="https://i.stack.imgur.com/ZOpNl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZOpNl.png" alt="img3"></a> <a href="https://i.stack.imgur.com/sZLEO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sZLEO.png" alt="enter image description here"></a>
  I think this is not ther right way of doing it, how can i <strong>do it without</strong> setting an <strong>exact height</strong>?</p>
  
  <pre><code>.GreenBox{
      margin-bottom: 10px;
      grid-column: 2/4;
      grid-row: 6/7;
      width: 100%;
      height: 61vh;
      display: grid;
      margin-left: -200px;
      margin-right: -10px;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto;
      border: 2px solid greenyellow;
  }
  
  .RedBox{
      grid-column: 2;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, 1fr);
      border: 1px solid red;
      height: 60.6vh;
      padding-left: 10px;
  }
  
  .PurpleBox{
      grid-row: 2;
      border: 1px solid blueviolet;
  }
  
  .Image{
      width: 100%;
      height: auto ;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  }
  
  
  
  
                   &lt;div className="GreenBox"&gt;
                      &lt;img className="Image" src={foto2}/&gt;
                      &lt;div className="RedBox"&gt;
                          &lt;p className="Paragraph"&gt;ILorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tellus eget velit cursus feugiat. Proin quis condimentum velit, a pellentesque erat. Maecenas consectetur eros et nibh condimentum pharetra. &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p><strong>PS: the problem is that if that if i resize the page there is always a bottom gap, i would like to remove that and fit well the content in the greenbox.</strong></p>