My grid works in Firefox but not in Chrome, Android or Edge

HTML & CSS
1

Hi.

First time poster here so hope I have done things correctly.

See Codepen below where I have pasted the relevant code. I want to have a box which is an input in a form. I want the box to have one column and three rows. The first row will contain an image and the second and third rows text, as a

. The text will be variable in length. I want the box to have fixed pixel dimensions (which I can alter via media queries later). I want the image to fill the remaining height (apart from margins and padding) after the text has been added.

The code works in Firefox but not in Chrome, Android or Edge. What am I doing wrong please? I am astounded by the in depth knowledge on display in these forums. Thank you.

2

OK, you’ve got a couple issues here.

  1. You’re setting width AND height on the picture class. While you CAN do that, it’s never really a good idea to do both.
  2. Your container width is 278 pixels, and your column width is 238 pixels, which means there can never be more than one.(238 + 238 = 476)
1 Like
3

You set the rows to auto but you need the first row to expand so use 1fr for the first row.

e.g. grid-template-rows: 1fr auto auto;

.picture {
  border: 1px solid lightblue;
  border-radius: 4px;    
  display: inline-grid; 
  vertical-align: top;
  padding: 20px;
  margin: 20px;
  height: 378px;
  width: 278px;
  box-shadow:  8px 8px 4px grey;
  grid-template-rows: 1fr auto auto;
  grid-template-columns: 238px; 
}

As Dave said above your picture may get stretched and not maintain its aspect ratio when you use height:100% so add width:auto at the same time.

Also you are not supposed to put block elements inside a label element. Do it like this instead:

2 Likes
4

Thank you.
I wonder if grid was not the best way of doing this? I would only ever want the grid to have one picture. I am doing it so that each grid has one picture and two peices of text - each grid is an input for a form. Thank you for your help.

5

Thank you.
I don’t get why

grid-template-rows: auto auto auto;

works in Firefox but not other browsers. Actually, I don’t really get why it works at all!

Thank you - I can see I have a lot to learn.

6

Ooh - I’ve just seen your CSS " if you don’t want text to wrap under input add this " - thank you

7

The auto value distributes the space based on the content and then adjusts the free space between the items evenly. When you make the image height:100% then it should only take up 100% height of that small space. Therefore I believe Firefox is incorrect in stretching the image to take up all the space.

If you replace one of your images with the text snippet you can see clearly that Chrome only makes the image as tall as the space would have allowed.

Screen Shot 2020-12-18 at 19.44.28

When I changed the first row to 1fr that tells the browser that that element should take up all the remaining space and the other elements take up only their minimum content needs. If I add the 1fr to your demo in Chrome then you get the result you desired.

Screen Shot 2020-12-18 at 19.48.37

As to whether Firefox is ‘wrong’ to do what it does is probably covered by an ambiguity in the specs where the space an element requires is determined by the height of its content but at the same time its contents height is determined by the amount of space available. It’s a circular reference where according to the specs the outcome would be undefined. i.e. The image’s height is based on the space available but the space available is based on the image’s height.

Therefore the solution is to do it properly for all browsers and force the available space with 1fr and then all browsers can calculate the image’s height as they now have the basis for that to be resolved.

CSS always has problems in basing percentage widths and heights on elements that get their dimensions via their content whose own height is determined by the space available.

You can read a similar case here but is quite advanced to follow but does explain why browsers can vary.

3 Likes
8

Wow! Thanks for that.
I don’t suppose you’ve written a book on CSS have you?

1 Like
9

Not recently (as far as I know wink).

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.