Для создания сетки или флекс-контейнера с переносом из блоков одинаковой ширины, не меньше чем ширина самого широкого из них, можно воспользоваться CSS свойством flex-wrap и единицами измерения rem.
Для начала добавим стили для каждого блока в нашей сетке. Укажем одинаковую ширину для каждого блока, используя rem. Например, если самый широкий блок имеет ширину 20rem, то можно установить ширину для всех блоков на 20rem или больше, чтобы не было проблем с переносом.
.block {
width: 20rem;
}
Затем создадим контейнер, который будет содержать все блоки. Укажем ему свойство display: flex, чтобы сделать его флекс-контейнером.
.container {
display: flex;
flex-wrap: wrap;
}
Теперь мы должны разместить все блоки внутри контейнера:
<div class="container"> <div class="block">Блок 1</div> <div class="block">Блок 2</div> <div class="block">Блок 3</div> ... </div>
CSS свойство flex-wrap: wrap позволяет блокам автоматически переноситься на новую строку, если они не помещаются в одну строку. Таким образом, если блоки имеют одинаковую ширину, то они будут переноситься на новую строку, если не вмещаются в текущей.
Таким образом, с помощью использования свойства flex-wrap и единиц измерения rem вы можете создать сетку или флекс-контейнер с переносом из блоков одинаковой ширины, не меньше чем ширина самого широкого из них.