Как сделать коллапс CSS сетки без определения ширины столбца - PullRequest
Новая
       51

Как сделать коллапс CSS сетки без определения ширины столбца

0 голосов
/ 09 января 2020

У меня есть этот макет:

enter image description here

В основном HTML и CSS следующие: 

<style>
  section { display: grid, grid-template-columns: repeat(3, 1fr) };
  div::first-child: { grid-column: 1/3}
</style>
<section>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</section>

когда область просмотра становится меньше, я хочу, чтобы сетка имела 2 столбца, а затем 1 столбец. Я мог бы использовать медиа-запросы и переопределить количество столбцов, но мне интересно, есть ли простой способ сделать это, используя функцию auto-fill?

Этот ответ показывает, как это сделать определяя ширину столбцов, но в идеале я бы не хотел этого делать, а ширина основывалась бы на доступном пространстве для количества столбцов.

...