Non direct son to take the entire width of a grid layout-CodePudding

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.

I've uploaded it to the codepen for better understanding https://codepen.io/Aegtar/pen/PoObBdG

what is needed is that the green part will take the entire width yet the text inside will stay within the lightsalmon div.

the HTML :

      <div class='main-layout'>
        <div class='weather-page'>
          <div class='top-side'>
            <div>WeatherPage</div>
            <div class='text-container'>
              <div class='ha'>
                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.
              </div>
            </div>
            <button>
              2
            </button>
            <button>
             2
            </button>
          </div>

        </div>
      </div>
      <section class='footer'>Footer</section>
    </div>

the scss :


.main-layout {
  display: grid;
  grid-template-columns: minmax(10px, 1fr) minmax(auto, 1300px) minmax(10px, 1fr);

  > * {
    grid-column: 2;
  }

  > *.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);
}

any help is appreciated!

CodePudding user response：

Just remove the grid-template-columns:minmax(10px, 1fr) minmax(auto, 1300px) minmax(10px, 1fr); from the .main-layout and then add

body{
    padding:0;
    margin:0;
}

so that it can strech all the way. Also, if you want the grid-template-columns , then comment on this post and I will (probably) find another solution.

Code Pen: https://codepen.io/576031/pen/rNYWqbz

CodePudding user response：

It seems like you're not really using your grid. You're creating 2 empty columns on the sides for styling and putting all the content in the center column. Why not use the default layout with a simple container and recreate what you want just by using the basic stylings with width, margin and padding.

* { margin: 0 auto; }
.width-90 { width: 90%; }
.width-100 { width: 100%; }

article {
  text-align: center;
  max-width: 1300px;
  border: solid 1px black;
}

  article > * { padding: 10px 0 30px 0; }  
  article header, article section { background-color: lightsalmon; }
  article main { background-color: lightgreen; }
  article footer { background-color: lightblue; }
  /*SCSS was not supported in this snippet but you could remove the word article in the lines above and then just place them in article if you want it to be specific with SCSS*/

      <div class='main-layout'>
        <article class='weather-page'>
          
          <header >
            <h2>WeatherPage</h2>
          </header>
          
          <main class='main width-100'>
              <p > 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 consectetur adipisicing elit. Iste, at. Atque alias modi nam provident quam, consectetur unde sunt exercitationem corrupti veritatis ea, itaque sint vero voluptatibus in fugit delectus recusandae eos enim deleniti doloribus magni. Repudiandae obcaecati blanditiis temporibus, vitae numquam illum ducimus voluptates sed in repellat quis esse! Cupiditate facilis magni velit molestias iure enim optio ratione. Ad? </p>
          </main>
          
          <section >
            <p><button>2</button></p>
            <p><button>2</button></p>
          </section>

          <footer class='footer width-100'>
            <p >Footer</p>
          </footer>
          
        </article>
    </div>

If you really want to keep your html structure the way it is then you could probably use a variable since you're working with SCSS. You could try this for example:


$grid-sides: 10px;

.main-layout {
  display: grid;
  grid-template-columns: minmax($grid-sides, 1fr) minmax(auto, 1300px) minmax($grid-sides, 1fr);

  /* ... everything else ...*/ 
}

/* at the right place in your SCSS*/
.text-container {
      margin-left: -$grid-sides;
      margin-right: -$grid-sides;
      padding-left: $grid-sides;
      padding-right: $grid-sides;
      background-color: lightgreen;
      /* ... everything else ...*/ 
}