Как сделать сетку/флекс с переносом из блоков одинаковой ширины, не меньшей чем ширина самого широкого из них?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Самое близкое это grid-auto-flow: column с grid-auto-columns: 1fr но не получается перенос
Есть вариант с auto-fill, minmax(???, 1fr) но оно не хавает max-content

Дополнительно:

с переносом из блоков одинаковой ширины, не меньшей чем ширина самого широкого из них

Можно поподробнее, а то немного непонятна эта часть вопроса.

  • Danny Arty, перенос как если бы у сетки было явное число колонок, ну допустим 3 колонки и 4й элемент уже во втором ряду встает. И с шириной каждого элемента/колонки такой как у самого широго из элементов, например если закинуть в нее элементы с шириной 100, 200 и 300 то все должны стать 300

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Роман IT Ответ

    Для создания сетки или флексбокса с переносом из блоков одинаковой ширины, не меньшей чем ширина самого широкого из них, можно использовать следующий подход:

    1. Определите контейнер, в котором будут располагаться ваши блоки. Например, это может быть `

    ` с классом "grid-container".

    2. Примените к этому контейнеру стили, чтобы он использовал flexbox и разрешал перенос содержимого. Для этого добавьте следующие стили:

    ```html

    .grid-container {
  display: flex;
  flex-wrap: wrap;
}

    .grid-container { display: flex; flex-wrap: wrap; }

    ```

    3. Создайте блоки, которые будут внутри этого контейнера. Для каждого блока примените следующие стили, чтобы они занимали одинаковую ширину и выравнивались по центру:

    ```html

    .grid-item {
  flex: 1 0 auto;
  max-width: 100%; /* Ширина блока не будет превышать ширину контейнера */
  text-align: center; /* Выравнивание по центру */
  padding: 10px; /* Добавим отступы для красоты */
}

    .grid-item { flex: 1 0 auto; max-width: 100%; /* Ширина блока не будет превышать ширину контейнера */ text-align: center; /* Выравнивание по центру */ padding: 10px; /* Добавим отступы для красоты */ }

    ```

    4. Разместите ваши блоки внутри контейнера, используя класс "grid-item" для каждого из них.

    Пример разметки:

    ```html

    <div class="grid-container">
  <div class="grid-item">Блок 1</div>
  <div class="grid-item">Блок 2</div>
  <div class="grid-item">Блок 3</div>
</div>

    <div class="grid-container"> <div class="grid-item">Блок 1</div> <div class="grid-item">Блок 2</div> <div class="grid-item">Блок 3</div> </div>

    ```

    Теперь у вас должна быть сетка/флексбокс с блоками одинаковой ширины, которая автоматически переносит содержимое на новую строку, если блоки не помещаются в одну строку из-за их ширины.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов woocommerce Как отображать при фильтрации товары со значением search параметра visibility: HUSKY — Products Filter for WooCommerce? 0 ответов