title: Non direct son to take the entire width of a grid layout
body: <p>i've been trying to make the text div to take the entire width of the grid layout but have it's content in line with the rest of the layout itself
  I've used width: 100vw, tried padding the corners yet it doesn't work properly and is a bit clunky.</p>
  <p>I've uploaded it to the codepen for better understanding
  <a href="https://codepen.io/Aegtar/pen/PoObBdG" rel="nofollow noreferrer">https://codepen.io/Aegtar/pen/PoObBdG</a></p>
  <p>what is needed is that the green part will take the entire width yet the text inside will stay within the lightsalmon div.</p>
  <p>the HTML :</p>
  <pre><code>      &lt;div class='main-layout'&gt;
          &lt;div class='weather-page'&gt;
            &lt;div class='top-side'&gt;
              &lt;div&gt;WeatherPage&lt;/div&gt;
              &lt;div class='text-container'&gt;
                &lt;div class='ha'&gt;
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat expedita molestiae nisi dolorum est,
                  tempore dolore! Itaque quidem nobis deleniti! Lorem ipsum dolor sit amet.
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;button&gt;
                2
              &lt;/button&gt;
              &lt;button&gt;
               2
              &lt;/button&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;section class='footer'&gt;Footer&lt;/section&gt;
      &lt;/div&gt;
  </code></pre>
  <p>the scss :</p>
  <pre><code>
  .main-layout {
    display: grid;
    grid-template-columns: minmax(10px, 1fr) minmax(auto, 1300px) minmax(10px, 1fr);
  
    &gt; * {
      grid-column: 2;
    }
  
    &gt; *.full {
      grid-column: 1 / -1;
    }
  }
  
  .home-page {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }
  
  .weather-page {
    gap: 10px;
    grid-auto-flow: column;
    background-color: lightsalmon;
    .top-side {
      gap: 20px;
      align-items: center;
      flex-direction: column;
      display: flex;
      margin-bottom: 30px;
  
      .text-container {
        background-color: lightgreen;
        .ha {
          text-align: center;
        }
      }
  }
  
  .footer {
    background-color: rgb(25, 118, 210);
  }
  </code></pre>
  <p>any help is appreciated!</p>