Grid Optimization and Scaling issues

Question

My 3x3 grid is not scaling as it should. Box 1, 5 and 9 contain some form of text, and the rest of them are pictures. When scaling down, the box with photos are displaying an excessive amount of white, and the ones with text are displaying an excessive amount of blue. I have no idea what is causing this to happen.

I am also looking for a way to center my text in its designated squares. Left aligned, but still centered. I have no idea how to apply both.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  grid-auto-rows: 1fr;
  text-align: left;
  color: white;
  font-size: 14px;
  font-family: Open Sans, sans-serif;
}


/* .grid>div {
  background: #2b5eaf;
  padding: 1em;
} */


/* .grid>div:nth-child(odd) {
  background: #2b5eaf;
} */

.box-1,
.box-5,
.box-9 {
  background: #2b5eaf;
  color: white;
}

.button {
  border: none;
  color: white;
  padding: 16px 50px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
}

.group1 {
  padding: 48px;
  justify-content: center;
}

h1 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

.box-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.photo>img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

.photo {
  width: 100%;
  height: auto;
}


/* TABLET VIEW */

@media only screen and (min-width: 759px) and (max-width: 1279px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
    grid-gap: 0;
  }
  .grid>div {
    height: 100%;
  }
  .box-2,
  .box-6,
  .box-7 {
    display: none;
  }
  .box-8 {
    grid-column: 2;
    grid-row: 3;
  }
  .box-9 {
    grid-column: 1;
  }
  h1 {
    font-size: 24px;
  }
}


/* MOBILE VIEW */

@media only screen and (max-width: 759px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    grid-gap: 0;
  }
  .box-1 {
    grid-row: 3;
    grid-column: 1/3;
  }
  .box-2 {
    grid-row: 2;
    grid-column: 1;
  }
  .box-3 {
    grid-row: 2;
    grid-column: 2;
  }
  .box-5 {
    grid-row: 1;
    grid-column: 1/3;
  }
  .box-7,
  .box-8,
  .box-9 {
    display: none;
  }
}

<div class="grid">
  <!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
  <div class="box-1">
    <div class="group1">
      <h1 class="quote" style="color:#ffffff" ;>"Lingerie is not about seducing men; It's about embracing womanhood"</h1><br><br>
      <p style="color:#ffffff" ;>- Dita Von Teese</p>
    </div>
  </div>

  <div class="box-2">
    <img class="photo" src="https://i.imgur.com/p5IOrlS.png" alt="">
  </div>

  <div class="box-3">
    <img class="photo" src="https://i.imgur.com/JKKqZjj.png" alt="">
  </div>

  <div class="box-4">
    <img class="photo" src="https://i.imgur.com/pI3g39l.png" alt="">
  </div>

  <div class="box-5">
    <h1 style="color:#ffffff" ;>Discover Something Sexy In You</h1>
    <a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
  </div>

  <div class="box-6">
    <img class="photo" src="https://i.imgur.com/2mVzhR6.png" alt="">
  </div>

  <div class="box-7">
    <img class="photo" src="https://i.imgur.com/bIcsE4S.png" alt="">
  </div>

  <div class="box-8">
    <img class="photo" src="https://i.imgur.com/LnUV9eF.png" alt="">
  </div>

  <div class="box-9">
    <div class="group1">
      <h1 style="color:#ffffff" ;>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the only subscription that gets unwrapped TWICE!"</h1><br><br>
      <p style="color:#ffffff" ;>- Wendy S.</p>
    </div>
  </div>

</div>

Answer 1

flex and grid works wonderfully together. Simply add display: flex; to your photos (and use proper selectors - .photo > img is not a proper selector as they are the same element - use img.photo instead). Also use height: 100%; for them to scale properly.

On the boxes where you want to center the text, use flex and its properties align-items: center; to center vertically and justify-content: center; to center horizontally.

I haven't done any styling in the media-query, you can use the same logic as above if you want.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  grid-auto-rows: 1fr;
  text-align: left;
  color: white;
  font-size: 14px;
  font-family: Open Sans, sans-serif;
}


/* .grid>div {
  background: #2b5eaf;
  padding: 1em;
} */


/* .grid>div:nth-child(odd) {
  background: #2b5eaf;
} */

.box-1,
.box-5,
.box-9 {
  background: #2b5eaf;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  border: none;
  color: white;
  padding: 16px 50px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
}

.group1 {
  padding: 48px;
  justify-content: center;
}

h1 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

.box-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

img.photo {
  display: flex;
  object-fit: cover;
  width: 100%;
  height: 100%;
}


/*.photo {
  width: 100%;
  height: auto;
}*/


/* TABLET VIEW */

@media only screen and (min-width: 759px) and (max-width: 1279px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
    grid-gap: 0;
  }
  .grid>div {
    height: 100%;
  }
  .box-2,
  .box-6,
  .box-7 {
    display: none;
  }
  .box-8 {
    grid-column: 2;
    grid-row: 3;
  }
  .box-9 {
    grid-column: 1;
  }
  h1 {
    font-size: 24px;
  }
}


/* MOBILE VIEW */

@media only screen and (max-width: 759px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    grid-gap: 0;
  }
  .box-1 {
    grid-row: 3;
    grid-column: 1/3;
  }
  .box-2 {
    grid-row: 2;
    grid-column: 1;
  }
  .box-3 {
    grid-row: 2;
    grid-column: 2;
  }
  .box-5 {
    grid-row: 1;
    grid-column: 1/3;
  }
  .box-7,
  .box-8,
  .box-9 {
    display: none;
  }
}

</h1>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>

<body>
  <div class="grid">
    <!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
    <div class="box-1">
      <div class="group1">
        <h1 class="quote" style="color:#ffffff" ;>"Lingerie is not about seducing men; It's about embracing womanhood"</h1><br><br>
        <p style="color:#ffffff" ;>- Dita Von Teese</p>
      </div>
    </div>

    <div class="box-2">
      <img class="photo" src="https://i.imgur.com/p5IOrlS.png" alt="">
    </div>

    <div class="box-3">
      <img class="photo" src="https://i.imgur.com/JKKqZjj.png" alt="">
    </div>

    <div class="box-4">
      <img class="photo" src="https://i.imgur.com/pI3g39l.png" alt="">
    </div>

    <div class="box-5">
      <h1 style="color:#ffffff" ;>Discover Something Sexy In You</h1>
      <a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
    </div>

    <div class="box-6">
      <img class="photo" src="https://i.imgur.com/2mVzhR6.png" alt="">
    </div>

    <div class="box-7">
      <img class="photo" src="https://i.imgur.com/bIcsE4S.png" alt="">
    </div>

    <div class="box-8">
      <img class="photo" src="https://i.imgur.com/LnUV9eF.png" alt="">
    </div>

    <div class="box-9">
      <div class="group1">
        <h1 style="color:#ffffff" ;>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the only subscription that gets unwrapped TWICE!"</h1><br><br>
        <p style="color:#ffffff" ;>- Wendy S.</p>
      </div>
    </div>

  </div>



</body>

</html>