0

I'm trying to get into the grid layout system and I'm really struggling with image-sizes inside grid containers. I just want to create a simple page with a navbar. The navbar should contain a logo, icons and text. It is divided into three parts:

  • A left part, containing the logo (aligned to the left side)
  • A center part, containing a title (aligned to the center)
  • A right part, containing an image and text (aligned to the right side)

Because I want to work with grid whenever possible my planned structure looks like this: https://codepen.io/Nicolas_V/pen/QWbvxoW

HTML:

<div class="site">
  <div class="navbar">
    <div class="navbar__area--left">
      <div>Logo</div>
    </div>
    <div class="navbar__area--center">
      <div>Admin Page</div>
    </div>
    <div class="navbar__area--right">
      <div>Text</div>
      <div>Image</div>
    </div>  
  </div>
  <div class="content">Content</div>
</div>

CSS:

html, body{
  margin: 0;
  padding: 0;
}
.site{
  display: grid;
  grid-template-rows: 1fr 9fr;
  height: 100vh;
}
.navbar{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background-color: green;
}
.navbar > div > *{
  display: inline;
  margin-right: 2rem;
  margin-left: 2rem;
}

.navbar__area--left{
  text-align: left; 
}
.navbar__area--center{
  text-align: center;
}
.navbar__area--right{
  text-align: right;
}

I created three containers for each part, so I can align their contents separately. So far so good.

Now I added a test image to the left part and expected it to fit to the containers height. But it doesn't. https://codepen.io/Nicolas_V/pen/XWbRYLR

What i don't understand is, that if I REMOVE the enclosing container from the left side, the image perfectly fits to the height of the navbar as expected previously.

https://codepen.io/Nicolas_V/pen/rNVmrNm

But I need to have this container, because for the right part I want multiple items in the container, all aligned to the right side.

I know, that I can set fixed heights for images and so on, but I want to dig into the grid system and I'm sure there is a way to solve my problem.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
NIcolas_V
  • 29
  • 1
  • 4
  • Instead of setting the images to `height: 100%; width: auto` (which isn't working anyway because you're missing a `;` and [using a percentage height inappropriately](https://stackoverflow.com/a/31728799/3597276)), try `width: 100%`. – Michael Benjamin Feb 28 '20 at 22:26
  • Also keep in mind [the automatic minimum size of grid items](https://stackoverflow.com/q/43311943/3597276) and [the true meaning of `1fr`](https://stackoverflow.com/q/52861086/3597276), both of which may be having an impact here. – Michael Benjamin Feb 29 '20 at 02:33
  • @Michael_B@Michael_B thanks for pointing me in the right direction! [using a percentage height inappropriately](https://stackoverflow.com/a/31728799/3597276) and [the automatic minimum size of grid items](https://stackoverflow.com/q/43311943/3597276) both contained valuabe information for my case. I thought about setting all enclosing tags to `height: 100%` but this alone wouldn't solve my problem because the implicit height of a `grid-template-row: 1fr 9fr` is not what i meant it to be. Setting the `min-height: 0` helped in combination with `height: 100%`. – NIcolas_V Mar 04 '20 at 13:25
  • @Michael_B What i don't understand is, on which elements i need the `min-height: 0`. Imo it would only be `.navbar` because it's a grid-cell from the `.site` grid container and has implicit height of `1fr`. But i needed to put `min-height: 0` on `.navbar` AND `.navbar__area--left`... why is that? Here is a working example: [Working Example Codepen](https://codepen.io/Nicolas_V/pen/NWqvQjR) – NIcolas_V Mar 04 '20 at 13:28
  • Because both elements are children of grid containers, making them grid items and, therefore, both are set by default to `min-height: auto` (content-based). – Michael Benjamin Mar 05 '20 at 03:38
  • In my answer [**here**](https://stackoverflow.com/a/36247448/3597276), read the section titled: *"You've applied `min-width: 0` and the item still doesn't shrink?"* – Michael Benjamin Mar 05 '20 at 03:39

0 Answers0