Jump to content
SSteven

Firefox 64.0.2 incorrectly renders 'grid-auto-rows' value having a 2-track listing

Recommended Posts

My CSS for a grid layout is as follows:

      .grd
      {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 100px 200px;
        grid-gap: 10px;

        border: 2px solid #f76707;		/* orange */
        border-radius: 5px;
        background-color: #fff4e6;		/* pale orange */
      }

https://jsfiddle.net/SSteven/bdza8sxf/

This should make Implicitly-created rows display with heights of 100px, 200px, and so on in a 2-row track repeating pattern.

However, this doesn't happen on Firefox 64.0.2 (32-bit version), which instead displays the 2 rows with the same height.

Why does this happen? I thought Firefox fully supported CSS grid. https://caniuse.com/#feat=css-grid

Chrome renders the rows correctly, though.

 

Edited by SSteven
case

Share this post


Link to post
Share on other sites

dsonesuk, I understand that Chrome pioneered the concept of "evergreen browser". Firefox and Edge lag behind Chrome in this regard. Also (as I already mentioned), Chrome supports multi-track listings in the grid-auto-rows property.

Therefore, should Chrome usage be preferred over other browsers?

Share this post


Link to post
Share on other sites

I generally prefer to support the least common denominator to give the users of my website the best experience regardless of which browser they're using.

  • Like 2

Share this post


Link to post
Share on other sites
12 hours ago, SSteven said:

Firefox and Edge lag behind Chrome in this regard. Also (as I already mentioned),

I wouldn't say that is true, as new features are introduced Firefox is usually pretty quick to implement them.

Also if you have the superhuman power to force everyone to use Chrome, go for it! But! Wouldn't be better to use the option of using the grid-auto-row: and grid-template-row: in this order that will end up giving the same result in all browsers.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...