As a beginner in CSS Grid, I recently encountered an issue where the layout differed between Firefox and Chrome. It seems like Firefox is adhering strictly to the grid width specifications set with "grid-template-columns", whereas Chrome is adjusting based on the content first before considering the grid width.
If you open the following pen link in both Firefox and Chrome, you'll notice the different results. How can this issue be resolved?
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>