Как можно сложить так элементы?

Question

[wakenbyWork]

Верстаю футер и возникли проблемы с построением элементов в адаптиве. Пример упростил максимально)

Как это выглядит на пк версии:



Блок сверстан на flex с justify-content: space-between;

Необходимо на планшетной версии сделать так:



Пришла идея сделать через display: contents;



Но поддержка display: contents; плоха. И у меня два вопроса:

1) Можно это как-то сделать на grid?
2) Если прописать так:

.class {
  display: block;
  display: contents;
}

То в браузерах с поддержкой contents будет выбран display: contents; а в которых нет будет display: block? Просто есть идея для браузеров которые плохо работают с display: contents; сделать не 4 столбца а 3, таким способом))

Comments

[Ankhena]

Можно это как-то сделать на grid?

Да.
Прочитайте любой справочник по гридам и/или пройдите простенькую игрушку на полчаса https://cssgridgarden.com/#ru
Либо покажите, что у вас не получилось гридами.

То в браузерах с поддержкой contents будет выбран display: contents; а в которых нет будет display: block?

Знаете, какой самый простой и надежный способ это узнать? ;)

[wakenbyWork]

Ankhena

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

https://codepen.io/wakenby/pen/QWOLMaJ

Не могу ровно отцентрировать по середине колонки. И По середине большой отступ между колонками((

Подскажите пожалуйста как исправить))

[Ankhena]

wakenbyWork,
я вижу так:

spoiler

И там колонки явно центрированы.
Отступа между колонками нет вообще.

Судя по скрину, который показывает как должно быть, центрировать среднюю колонку не нужно.
А вот отступы между колонками задать имеет смысл.

Возможно вам помогут величины min-content, max-content, функции minmax и т.д.

[wakenbyWork]

Спасибо, но все же решил использовать @supports (display: contents). Так больше нравиться))

А так да, думаю среднии колонки можно не центрировать, а для 3 колонки margin-top можно задать отрицательный отступ. Спасибо еще раз))

[Ankhena]

wakenbyWork,

а для 3 колонки margin-top можно задать отрицательный отступ.

Жестоко...
Но дело ваше.

[wakenbyWork]

Ankhena, А как без отрицательного отступа то убрать пространтсво?))))

[Ankhena]

wakenbyWork, какое?
Вы в своем примере забыли растянуть большие столбики на 2 строки.