SSteven Posted January 28, 2019 Share Posted January 28, 2019 (edited) 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 January 28, 2019 by SSteven case Link to comment Share on other sites More sharing options...
dsonesuk Posted January 28, 2019 Share Posted January 28, 2019 It looks as though Firefox don't support multiple value for grid-auto yet!, but does using the method of grid-template-rows: 100px 200px; Link to comment Share on other sites More sharing options...
SSteven Posted January 29, 2019 Author Share Posted January 29, 2019 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? Link to comment Share on other sites More sharing options...
Ingolme Posted January 30, 2019 Share Posted January 30, 2019 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. 2 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 30, 2019 Share Posted January 30, 2019 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. 1 Link to comment Share on other sites More sharing options...
SSteven Posted January 30, 2019 Author Share Posted January 30, 2019 OK, got it. Thanks for the inputs. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now