3

I have a CSS grid, which looks like the following:

grid-template-columns: auto  1fr;
grid-template-rows: 2% 8% 1fr auto auto 2%;
grid-template-areas:
    "sg-header  sg-header"
    "logo title"
    "nav-bar content"
    "nav-bar description"
    "nav-bar extra-info"
    "sg-bottom sg-bottom";

When I fill up the grid areas, everything works perfectly with texts. However I want to place an image in the first cell in the 2nd row ("logo" area). I want to keep its aspect ratio, and adjust its height to the row height. For this I'm using the following:

width: auto;
height: 100%;

The height adjusts perfectly to the row height and it keeps the aspect ratio too, however the column, which is auto doesn't adjust to the image width. If I replace the image with text, the column width will adjust to the text width, but for the image this just doesn't work.

What is more interesting that I've just noticed that this only occurs in Chrome (67.0.3396.87). In Firefox it is even worse, because in Firefox (52.9.0) for some reason the first column is as wide as the image before rescaling even though the image shrinks to to row height and keeps the aspect ratio, thus its display width is lower.

TylerH
  • 20,799
  • 66
  • 75
  • 101
CAJ69I
  • 261
  • 1
  • 2
  • 10
  • 1
    One consideration: https://stackoverflow.com/q/43311943/3597276 – Michael Benjamin Jul 24 '18 at 12:41
  • 1
    FYI Firefox has released a lot of updates for CSS Grid since version 52. The current version is 61.0.1; consider checking your code there. If you are concerned about long-term support and are using an ESR version, there is a more recent ESR version at Firefox 60, too. – TylerH Jul 24 '18 at 14:43
  • Thank you for the info. In that case I hope we will update firefox soon. – CAJ69I Jul 26 '18 at 08:13

0 Answers0