How is the height of this grid-container being calculated?

Question

In #2, how is the height of .footer being calculated?

#1

.footer {
}

img {
  width: 100%;
}

<div class="footer">
<img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image">
</div>

In this example, the height of the footer is calculated through something like: the width of the initial-containing-block (html) & taking into account the aspect-ratio of the image.

#2

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: 100%;
      grid-template-rows: 100%;
  margin: 0 auto;
}

img {
  height: 100%;
  width: 100%;
}

<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

I understand the width of each image is about a third of the footer's width. What is determining the footer's height? I have a feeling the intrinsic dimensions of the images had something to do with it but neither image is scaling up to be its aspect ratio. img's height is set to be 100%. 100% of what?

by default, images within a grid will `contain`. Acts the same as `object-fit: contain;` Mean they will take the full width and automatically size the height without changing the images size-ratio. — tacoshy, Jan 23 '21 at 04:03

Temani Afif · Accepted Answer · 2021-01-23T09:58:58.103

First, let's get rid of some properties to have the following:

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100%;*/
  margin: 0 auto;
}

img {
  /* height: 100%; */
  width: 100%;
  outline:1px solid red;
}

<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

You have a footer with a width equal to 100vw divided into 3 equal columns (so around 33.33vw each). Each image will be width:100% inside each column and they will keep their ratio. Logically this will define the height of the footer and the height of the single row. Since we are dealing with CSS grid, all the columns inside the same row will have equal height and this height is the key here and the one used as a reference when adding height:100% to the images:

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100%;*/
  margin: 0 auto;
}

img {
  height: 100%;
  width: 100%;
  outline:1px solid red;
}

<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

In other words, the content was used to define the height of our column and this height was later considered as reference of our percentage height. Note that grid-template-rows: 100% is useless here and will do nothing since we have no reference to resolve that percentage. It will only have an effect in case you define an explicit height on the grid:

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100%;
  margin: 0 auto;
  height: 200px;
}

img {
  height: 100%;
  width: 100%;
  outline:1px solid red;
}

<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

Resize the screen of the above example and you will notice that the height of the grid, the row and the 3 columns will be equal to 200px because we explicitely defined that height unlike the first case where it was defined by the content.

Another non intuitive example where we will have one image that will define the height and will have its height as percentage based on its own height!

.icons {
  display: grid;
  margin: 0 auto;
  width:80%;
  border:2px solid
}

img {
  height: 150%;
  display:block;
  width: 100%;
  outline: 1px solid red;
}

<div class="icons">
  <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
</div>

Note how the image will overflow by exaclty 50% which is the difference between 150% and 100% where 100% is the height of the image if we set no height.

Related question with similar examples: Why is my Grid element's height not being calculated correctly?

How is the height of this grid-container being calculated?

1 Answers1