Difficulty Keeping Child Divs Totally Square

Question

I'm having some difficulty keeping my responsive grid totally square. I tried setting dimensions for the images as a means to control the dimension of the div closer to be square but that didn't work like I thought it would.

What follows is what I'm working with right now. As you can see, on very wide displays the dimensions are more square and on narrower displays the images are very tall and distorted (eg not square).

.one {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(100px, auto);
}

.one img {
  object-fit: cover;
  object-position: center;
  height: 480px;
  width: 100%;
}

.one h3 {
  background-color: pink;
  color: black;
  font-weight: 700 !important;
  padding: 0.5em;
  margin: 0;
}

<div class="one">

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>


</div>

What can I do to keep the cell/divs, title and all, totally square?

this will probably give you some ideas: https://stackoverflow.com/q/54927180/8620333 — Temani Afif, Apr 06 '19 at 19:20
another example: https://stackoverflow.com/questions/55405044/ — kukkuz, Apr 07 '19 at 08:13

score 1 · Accepted Answer · answered Apr 06 '19 at 21:44

This is because you have set all the images to have height: 480px regardless of the width. So as the width of the images is set to 100% they becomes more narrow on smaller screen sizes but the height remains the same. You could change the height to max-height: 480px instead.

.one {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(100px, auto);
}

.one img {
  object-fit: cover;
  object-position: center;
  max-height: 480px;
  width: 100%;
}

.one h3 {
  background-color: pink;
  color: black;
  font-weight: 700 !important;
  padding: 0.5em;
  margin: 0;
}

<div class="one">

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>


</div>

Difficulty Keeping Child Divs Totally Square

1 Answers1