CSS Grid column widths behaving differently in Firefox and Chrome

Question

I am new to CSS Grid, while I was implementing a Grid Layout, I realised that the layout is different in Firefox and Chrome. I think Firefox is sticking to the grid width specifications that I give with "grid-template-columns", while chrome is adjusting itself to the content first and then looking at the grid width.

Please find the link below for a pen, when you open it in firefox and chrome the results look different. How to sort this issue?

https://codepen.io/alosies/pen/OoXvre?editors=1100

.gridWrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-areas: "palette questionDisplay questionDisplay questionDisplay ";
  grid-gap: 1rem;
}

.palette {
  grid-area: palette;
}

.questionDisplay {
  grid-area: questionDisplay;
}

.box{
  border: 1px solid grey;
}

<div class="gridWrapper">
  <div class="box palette">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nobis aut labore repellendus exercitationem ab, illo sapiente fuga est provident, quam corrupti molestiae sint quibusdam aperiam. Deleniti ratione dolorum debitis.div
    </div>
  <div class="box questionDisplay">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem amet</div>
  
</div>

Review this answer: https://stackoverflow.com/a/48446849/5517435 — Nisarg, Aug 28 '18 at 18:50

Michael Benjamin · Answer 1 · 2018-08-28T19:44:41.413

If you are using grid-template-areas to set your column order, then there's no reason to use repeat or auto-fit. Those functions are for managing a repeating pattern of tracks. That's not what you have. You've created four columns with grid-template-areas.

I think what's happening is that you're sending mixed messages to the browsers, and they are handling it differently. Firefox and Edge process the conflict one way. Chrome does something else.

Try this instead:

.gridWrapper {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
  grid-template-columns: minmax(150px, 1fr);  /* new */
  grid-template-areas: "palette questionDisplay questionDisplay questionDisplay ";
  grid-gap: 1rem;
}

.palette {
  grid-area: palette;
}

.questionDisplay {
  grid-area: questionDisplay;
}

.box {
  border: 1px solid grey;
}

<div class="gridWrapper">
  <div class="box palette">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci nobis aut labore repellendus exercitationem ab, illo sapiente fuga est provident, quam corrupti molestiae sint quibusdam aperiam. Deleniti ratione dolorum debitis.div
  </div>
  <div class="box questionDisplay">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem amet</div>

</div>

Hi, I tried changing grid-template-columns to "grid-template-columns: minmax(150px, 1fr);" still the column width is determined by the content and not by grid-template-area distribution. — Alosies George, Aug 29 '18 at 02:11
I tested in Chrome, FF and Edge. It works, based on my understanding of the problem. — Michael Benjamin, Aug 29 '18 at 18:25

CSS Grid column widths behaving differently in Firefox and Chrome

1 Answers1