Кроссбраузерная сетка?

Question

[Андрей Охотников]

Как наиболее правильно реализовать подобную сетку чтобы работала на большинстве браузеров?

Answer 1

[Сергей delphinpro]

Один общий блок с картинкой,
внутри несколько блоков с белыми рамками без фона.
Внутренние блоки флексами.

Answer 2

[RAX7]

Answer 3

[Brother-Ur]

Посмотри на грид сетку. Имхо, она тут оптимальна.

Comments

[Егор Антропов]

Нужно чтобы работало везде, а гриды ещё не везде поддерживаются

[smilingcheater]

Не везде поддерживаются? https://caniuse.com/#search=grid%20layout Чего вам не хватает в этом списке? Даже такое старьё, как IE10-11, поддерживает grid layout.

[Brother-Ur]

Егор Антропов, ну, если вы верстаете под IE 6-9 или что-то подобное, то я вам сочувствую. А относительно современные версии браузеров поддерживают.

[Егор Антропов]

smilingcheater, Brother-Ur, На caniuse 93.26%

[smilingcheater]

Егор Антропов, в оставшихся 6.74% - древние IE6-9; опера мини, которая не поддерживает вообще ничего; и другие старые версии браузеров, для которых отсутствие поддержки Grid Layout является наименьшей проблемой.
Просто ради интереса - какой процент поддержки браузерами вы считаете достаточным чтобы начинать использовать какую-либо фичу?

[Егор Антропов]

smilingcheater, Просто использую то, что используют в бутстрапе.

[Михаил Костиков]

smilingcheater, Brother-Ur, я год назад делал сайт через грид. В ие последнем вся сетка в одну точку сжалась. Это был баг или я что-то не так сделал?

[Brother-Ur]

Михаил Костиков, IE последние понимают гриды только с префиксом -ms

Answer 4

[Максим]

https://codepen.io/topicstarter/pen/rNByqoW вот кроссбраузерно = смотрите