Я пытаюсь создать контейнер для неопределенного количества блоков одинакового размера.
- Я бы хотел, чтобы контейнер поместил столько блоков в строке, сколько уместится, а затем перенесет на следующую строку.
- Когда будет доступно свободное место, я бы хотел размер блоков увеличивается.
- Я бы хотел, чтобы все блоки имели одинаковый размер. Хорошо, если это приведет к пробелу в нижнем ряду.
Первые два ограничения достижимы с помощью flexbox, но я запускаю проблему в том, что если не хватает блоков для заполнения последнего ряда, эти блоки становятся вытянутыми по сравнению с другими. Я бы хотел, чтобы все блоки имели одинаковый размер. До сих пор я не нашел способ сделать это с помощью flexbox.
Я пробовал свои силы в сетке CSS, и это позволяет мне сохранять все блоки одинакового размера. Тем не менее, я сталкиваюсь с другой загадкой. Я не знаю, сколько столбцов потребуется, поэтому я использую repeat(auto-fit,<track size>). Чтобы использовать автоподгонку, размер дорожки должен быть определенный .
grid-template-columns: repeat(2,auto); /* does what I want, but the amount of columns is fixed */
grid-template-columns: repeat(auto-fit,minmax(350px,1fr)); /* does what I want, but I'd like the min-size to be defined on the cell */
grid-template-columns: repeat(auto-fit,minmax(min-content,1fr)); /* invalid */
codepen: https://codepen.io/Thoronwen/pen/bGVGoNg
Мне кажется, что это неправильно что минимальный размер блока должен быть определен в сетке. Я намерен использовать это размещение в стиле сетки в нескольких местах в моем проекте, и для каждого места содержимое блоков будет разным. Некоторым может потребоваться больше ширины, чем другим. Зачем мне нужно другое определение сетки, если разные ячейки? Я бы хотел определить минимальную ширину в блоке, а не в сетке, как я могу с помощью flexbox.
Такое ощущение, что это должно быть возможно. Я что-то упустил?