This question already has answers here:
Why does Chrome 80 cause this grid-template-rows: auto problem
(2 answers)
Closed 3 years ago.
I have a page with four forms. Each form's layout is defined using the following CSS grid configuration, which is shared between all of the forms:
.base-grid-wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-row-gap: 1em;
grid-column-gap: 1em;
width: 75%;
}
Since Chrome 80 was released, the styling for the first of these forms has been (sort of) broken. The computed values for grid-template-columns is non-uniform, but only for the first of the four forms. For the following three forms--which use the same base grid definition--the grid's columns are uniformly sized, which is what I expect when using repeat(12, 1fr) as I have. Before Chrome 80, this was not the case: all of the form's grids had uniformly-sized columns.
In other browsers (Safari and Firefox), the columns render as expected. Is there something that changed in Chrome 80 that would have caused this? Searching through the Chrome changelog, I can't seem to find anything relevant.
I've tried to see if there are any wider-scoped CSS rules that might be causing this, but I can't find anything. I admit I'm not the most advanced CSS user, so I definitely could have configured the grid incorrectly, or something, but look at the Stackblitz linked below to see if this is the case.
I saw a couple of other similar Stackoverflow questions, but none of them seem to quite fit the problem I'm seeing:
CSS grid behaviour different in Chrome and Firefox
--> perhaps most similar to my problem, but doesn't have any relevant solutions, but it does have confirmation of the problem
Has anybody faced issue working with Chrome 80 and CSS Grid
--> similar to my problem, but it doesn't have a good working example of the problem, and thus it doesn't have any useful responses
Why does Chrome 80 cause this grid-template-rows: auto problem
--> very different configuration than in my case, so not super relevant to what I'm seeing
For what it's worth, this is an Angular 8 application using Angular Material, but I'm pretty certain that that's not the source of this problem, especially considering it works as intended in other browsers.
Here's a Stackblitz that replicates the problem (be sure to open in Chrome 80+): editable & (inspectable) hosted app.
Here are some screenshots, as well:
First form
Chrome Devtools - grid outline
Firefox Devtools - grid outline
Chrome Devtools - non-uniformly-computed grid column widths
Later form, using the same base grid definition
Chrome Devtools - grid outline
Chrome Devtools - uniformly-computed grid column widths
You issue is almost similar to the question you linked1 (where I also answered) and it has to do with how chrome is dealing with 1fr which is equal to minmax(auto,1fr).
Using minmax(0,1fr) seems to fix the issue but I need to dig more in order to identify why. It's either a bug or they changed the way minmax() is calculated.
will update with the bug report or the detailed explanation
1: That questions deals with a row configuration where we need to do the opposite. Use 1fr (minmax(auto,1fr)) instead of minmax(0,1fr)
I had the same problem this morning. I had the bug reported on one of the pages I am responsible for, for the latest chrome version at that time.
I made sure I had the latest chrome installed and went to check the issues this morning and 1fr was really not being respected. Maybe 15 minutes ago I went on ahead to report the chrome bug and there it was new update pending, so I've updated the chrome again, second time today, and problem was fixed.
I did some digging and I am pretty sure they did change how css grid is handled, more specifically:
[css-grid] Accommodate spanning items crossing flexible tracks
But since it caused breakage across the web they reverted the change.
I think it's referenced here https://chromium.googlesource.com/chromium/src/+/b1738fb61215bb8610e08f65de4d01681e250f7f.
Edit: There is also this answer that goes into more details for others having this issue
https://stackoverflow.com/a/60284361/12285468
I am quite a beginner at webdesign and I need some help with my webpage. I use wordpress / generate press template. On the desktop mode the 4 widgets in the footer are in a single line, but when I switch to tablet or mobile they are on top of each other. I already managed to change the font size of the text in the footer, but I still can't get the widgets in a single line for tablet and mobile. Can you please help me? Please try to explain in the simplest of terms as I am not that good yet :D Thank you!
Thank you I finally managed to find a way using the good old F12 command in the browser while checking my webpage. This command has helped me along the way with most issues I have had.
I used this code:
.inside-footer-widgets {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;}
Although I am not quite satisfied as the last, 4th widget's text does not align the content to the center.
On a tablet I found the look of the page untidy with all the widgets under each other, now it's better. For the mobile view I kept the stacking version.
Here is my website www.steelspiritdesigns.com
On my website, http://reefbulk.shop/?page_id=1438, you can see 4 articles. They are normally lined up (as on the home page), but for some mysterious reason, they are not on some pages (such as page_id=1438).
I believe I can fix it with CSS, however adding a margin doesn't seem to help.
I hope someone here knows how to fix this infuriating issue. Last time I had it (on my other non-test site), I just made all the images the same dimensions. This has now failed in this new theme I'm using.
Asking the theme maker is no option as they give no support if your membership runs out (which it has).
You could display your articles as grids, using the following CSS on your articles.
display: grid;
align-content: space-between;
When I build my VueJS project with npm run build the columns of my grid get an enormous height for no reason (I could find) I'm currently searching for like 3 hours already. Even changed settings etc. I think it has something to do with my css.. I hope this question can help. Couldn't find anything on Stackoverflow regarding this issue.
It looks like the height of the divs are the only issue while building..
In this link you can see how it's supposed to be:
http://jmp.sh/IU64imX
On this url you can see what happens:
http://206.189.5.59/
I see that your .grid class has min-height: 100vh. Removing this fixes the issue for me.
For the life of me I cannot seem to discover the root of this problem. The site in question is here: http://perfectashot.com/
The sections that are utilizing flex - the intro, the blue squares, the app, and the order section - aren't going into a column layout on mobile. I'm using autoprefixer to take care of my cross browser issues, and after searching some other topics I tried to set -webkit-box-orient: vertical; manually (this hasn't been pushed to the live site, sorry) Regardless of my efforts nothing seems to be taking effect.
If anyone has any ideas, or if I'm just an idiot and missing something glaring please let me know. Thanks.