Ширина столбцов CSS Grid в Firefox и Chrome ведет себя по-разному

Question

Я новичок в CSS Grid, когда я внедрял Grid Layout, я понял, что это различие в Firefox и Chrome. Я думаю, что Firefox придерживается спецификаций ширины сетки, которые я даю с помощью «grid-template-columns», в то время как Chrome сначала подстраивается под контент, а затем смотрит на ширину сетки.

Пожалуйста, найдите ссылку ниже для ручки, когда вы открываете ее в Firefox и хромируете, результаты выглядят иначе. Как разобраться в этом вопросе?

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>

Answer 1

Если вы используете grid-template-areas для установки порядка столбцов, то нет смысла использовать repeat или auto-fit. Эти функции предназначены для управления повторяющимся шаблоном дорожек. Это не то, что у вас есть. Вы создали четыре столбца с grid-template-areas.

Я думаю, что происходит то, что вы отправляете смешанные сообщения в браузеры, и они обрабатывают это по-разному. Firefox и Edge обрабатывают конфликт одним способом. Chrome делает что-то еще.

Попробуйте вместо этого:

.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>