How would you set a background on a grid css?

Admin 1
Viewed 53

@media only screen and (min-width: 1024px) {
  * {
    margin: 0px;
    padding: 0px;
    border: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }

  body {
    min-height: 100%;
  }

  .gridFirstTP {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
  }

  .First-display {
    height: 100%;
    width: 100%;
    background: rgb(254, 122, 255);
    background: linear-gradient(
      96deg,
      rgba(254, 122, 255, 1) 0%,
      rgba(55, 154, 237, 1) 67%
    );
  }


  .statistiquesRight {
    

    grid-column: 3/3;
    grid-row: 3/1;
    background: rgb(105, 177, 239);
    background: linear-gradient(
      21deg,
      rgba(105, 177, 239, 1) 0%,
      rgba(235, 119, 238, 1) 83%
    );
    box-shadow: -6px 0px 15px -4px;
  }
 }
    <div class="First-display">
      <div class="gridFirstTP">
              <div class="statistiquesRight">
          <div class="domStats">
            <h2 id="rightstats">-Les Statistiques-</h2>
            <div>
              <p class="articleStatsl">Nombre d'article visités:</p>
              <p class="articleStatsl" id="statspress">0</p>
            </div>
          </div>
        </div>
      </div>
    </div>

I have a projet website where I try stuff, and I'm trying to figure out something.

I have a css grid

 grid-column: 3/3;
 grid-row: 3/1;

so this element is taking the whole right side of the screen which is fine.

But for some reasons my div, I mean. the lengh of this element is not entirely rendered, for some reason it doesn't take the whole screen, the element is rendered but right as the middle on my webpage the element stop and it seems to display the default background of a webpage , if I understand it correctly I have to set a background, but I already have a div made for this :

.First-display {
    height: 100%;
    width: 100%;
    background: rgb(254, 122, 255);
    background: linear-gradient(
        96deg,
        rgba(254, 122, 255, 1) 0%,
        rgba(55, 154, 237, 1) 67%
    );
}

Is it because of the css grid, I have to add something, because the page is now behaving differently ?

Should I do it directly on my element ? or is this a bad idea. Thank you very much for your time <3

css-grid css html
1 Answers

Height: 100% doesn't work exactly how you meant (for non-positioned elements). You need to set (min-)height: 100vh to .gridFirstTP element to use whole viewport height.

@media only screen and (min-width: 1024px) {
  * {
    margin: 0px;
    padding: 0px;
    border: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }

  body {
    min-height: 100%; /* you can remove it */
  }

  .gridFirstTP {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    height: 100vh;
  }

  .First-display {
    height: 100%; /* you can remove it */
    width: 100%;
    background: rgb(254, 122, 255);
    background: linear-gradient(
      96deg,
      rgba(254, 122, 255, 1) 0%,
      rgba(55, 154, 237, 1) 67%
    );
  }


  .statistiquesRight {
    

    grid-column: 3/3;
    grid-row: 3/1;
    background: rgb(105, 177, 239);
    background: linear-gradient(
      21deg,
      rgba(105, 177, 239, 1) 0%,
      rgba(235, 119, 238, 1) 83%
    );
    box-shadow: -6px 0px 15px -4px;
  }
 }
    <div class="First-display">
      <div class="gridFirstTP">
              <div class="statistiquesRight">
          <div class="domStats">
            <h2 id="rightstats">-Les Statistiques-</h2>
            <div>
              <p class="articleStatsl">Nombre d'article visités:</p>
              <p class="articleStatsl" id="statspress">0</p>
            </div>
          </div>
        </div>
      </div>
    </div>

user_15956690
Related