За последние 24 часа нас посетили 22752 программиста и 1268 роботов. Сейчас ищет 741 программист ...

Авто-центрирование в grid

Тема в разделе "HTML и CSS", создана пользователем HeavyLogic, 28 май 2022.

  1. HeavyLogic

    HeavyLogic Новичок

    С нами с:
    3 май 2022
    Сообщения:
    9
    Симпатии:
    0
    Народ, а в grid можно сделать как в flex, автоматическое выравнивание по центру того что не влезает ?

    Вот что у меня сейчас: https://codepen.io/heavylogic/pen/jOZZNoE
    Вот что я хочу: https://codepen.io/heavylogic/pen/ExQQYqX

    Есть условие - стили у всех внутренних блоков должны быть одинаковые, нельзя накинуть что-нибудь на последние 2 персонально. Это потому что я не знаю сколько будет внутренних блоков - может в конце не влезет 1, а может 2. К сожалению, flex использовать не могу.
     
  2. HeavyLogic

    HeavyLogic Новичок

    С нами с:
    3 май 2022
    Сообщения:
    9
    Симпатии:
    0
    Всё, перешёл на flex. Тут просто сложный шаблонизатор, с которым было сложно использовать flex, но я справился.
    Код (Text):
    1. '{{WRAPPER}} .heavy-looper-wrap' => 'column-gap: {{SIZE}}{{UNIT}};',
    2. '{{WRAPPER}} .heavy-looper-item' => 'width: calc((100% / {{number_columns.VALUE}}) - ({{SIZE}}{{UNIT}} - ({{SIZE}}{{UNIT}} / {{number_columns.VALUE}})));',
    Но с grid походу нельзя сделать такое же поведение для неопределённого количества дочерних блоков. Перерыл весь stackoverflow, пересмотрел кучу примеров.