Всем привет. Есть шаблон, который никак не могу заставить вести себя как нужно - в одной из секций шаблона есть 3 блока, которые всегда должны быть по центру страницы, но в какой-то момент они начинают прижиматься к левому краю экрана и остается много пустоты, подскажите как починить (при этом есть навязчивое желание не использовать @media
думаю код объяснит вопрос лучше, чем я

https://codepen.io/McLotos/pen/ExYWoQq?editors=1100

Если начать растягивать страницу по ширине, то в какой-то момент блоки просто приклеиваются к левому краю, а нужно чтобы все три блока, стоя рядом были точно по середине страницы

в качестве простого решения, можно добавить @media screen and (min-width: 50rem) и там указать что-то типа

main
  grid-template-columns: repeat(5, 1fr)
  section
    grid-column-start: 2
    grid-column-end: 4

но не хочется использовать @media-запросы, чтобы не возиться с подгонкой под разные экраны, смысл grid пропадает



_____________
программирование - инструмент для решения конкретных задач, любая попытка спроектировать что-то универсальное приведет к провалу.©paul85
В любом случае тебе прийдётся пройти путь изобретения велосипеда, который прошли другие, только причиной твоего изобретения будет непонимание принципов работы велосипеда изобретённого другими людьми.©SlavaFr
jQuery это попытка использовать АН-225 для перевозки зубочистки

Не знаю на сколько я правильно понял и верно ли делаю, т.к. не в пользовался этим...
Но попробовал так:

grid-template-columns: repeat(auto-fit, minmax(calc( 100% / 4), 1fr))

вроде все по центру (кроме текста в <p> тегах), правда и ширина блоков тянется.

В инспекторе, при наведении на блок main->section, видно как разбиваются блоки, в твоем варианте, при большом разрешении, их у меня было 5ть, при уменьшении соответственно 4-3-2-1 и становятся в столбик, в моем варианте их максимум 3 и при уменьшении экрана, они так и остаются - 3, увеличивая блок по высоте.

Скорее всего я не так понял что нужно, но может на какие нибудь мысли натолкнет )

Нет решения?

_____________
программирование - инструмент для решения конкретных задач, любая попытка спроектировать что-то универсальное приведет к провалу.©paul85
В любом случае тебе прийдётся пройти путь изобретения велосипеда, который прошли другие, только причиной твоего изобретения будет непонимание принципов работы велосипеда изобретённого другими людьми.©SlavaFr
jQuery это попытка использовать АН-225 для перевозки зубочистки

Похоже без медиа никак (.

Почитал тут за Грип... веселая штука, но... что можно было бы флексами раскидать, тут приходится колдовать ((

Писать два "шаблона(grid-template-areas)" один для мобилки другой для десктопа, на сколько я понял, иначе никак (.

Может кто из "гуру CSS" подскажет, было бы интересно

I have solution



Рабочий пример

https://codepen.io/McLotos/pen/ExYWoQq?editors=1100

_____________
программирование - инструмент для решения конкретных задач, любая попытка спроектировать что-то универсальное приведет к провалу.©paul85
В любом случае тебе прийдётся пройти путь изобретения велосипеда, который прошли другие, только причиной твоего изобретения будет непонимание принципов работы велосипеда изобретённого другими людьми.©SlavaFr
jQuery это попытка использовать АН-225 для перевозки зубочистки

McLotos
Круто ), пару новых знания получил я )

Рад что удалось в итоге