CSS grid ненормально работает в ie10?

Question

[udzumaki]

Когда добавлял кроссбраузерность на сайт столкнулся с проблемой. IE налаживает (или просто не отображает) элементы таблицы которые идут до последнего и последний отображает.

Вот как сетка должна выглядеть


Вот как выглядит


Вот код

<section class="all_works">
		<div class="container">
			<h3 class="all_works--title">lorem</h3>
			<section class="all_works--works">
				<div class="all_works--work" style="background-image: url(https://bit.ly/2lYQOk3);"></div>
				<div class="all_works--work" style="background-image: url(https://cdn.pixabay.com/photo/2019/07/29/16/13/bald-eagle-4370916__340.jpg);"></div>
				<div class="all_works--work" style="background-image: url(https://cdn.pixabay.com/photo/2019/06/21/14/09/coffe-4289545__340.jpg);"></div>
				<div class="all_works--work" style="background-image: url(https://cdn.pixabay.com/photo/2019/09/06/11/27/spaghetti-4456186__340.jpg);"></div>
				<div class="all_works--work" style="background-image: url(https://cdn.pixabay.com/photo/2019/09/07/16/14/strommast-4459235__340.jpg);"></div>
				<div class="all_works--work" style="background-image: url(https://cdn.pixabay.com/photo/2019/09/08/14/26/dunes-4461128__340.jpg);"></div>
			</section>
		</div>
	</section>

.container {
	margin: 0 10%;
}

.all_works--works {
	margin: -15px -15px;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
}

.all_works--work {
	margin: 15px 15px;
	height: 300px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #fff;
}

grid-gap не задавал по понятным причинам, вместо этого шаманил с минусовыми маржинами. Я просто не могу понять почему ие не хочет делать 3 колонки.

Не поможете разобраться в чем дело? Буду очень благодарен.

Comments

[Алекс Глебов]

Грид и в последних версиях браузеров не работает еще без багов

[Артем Кондрацкий]

оставте уже в покое этот мертвый браузер

Answer 1

[Рома Зварич]

CSS Grid - достаточно новая технология.
В Internet Explorer 10 есть проблемы с поддержкой CSS Grid.
Данный браузер поддерживает только предыдущую (устаревшую) версию спецификации CSS Grid.
Подтверждение этому есть на сайте Caniuse
Потому у Вас и не работает

P.S. Если у Вас сетка такая, как на фото, её вроде без особых проблем можно заменить например, на Flexbox. Он более-менее поддерживается в IE 10. Но вот в IE 9 уже не работает

Comments

[udzumaki]

я понимаю что flexbox, но мне надо адаптив без лишних запросов

[Rustam Bainazarov]

udzumaki, ну удачи тогда вам. IE10 и grid несовместимые понятия. В нём и flexbox-то старой версии с кучей багов, а вы о grid.

[udzumaki]

Рустам Байназаров, спасибо

[Rustam Bainazarov]

udzumaki, не за что, только в чём проблема сделать на тех же float или с помощью старой спецификации flexbox конкретно в IE?

А для других браузеров — на grid. Иначе у вас нет вариантов, к сожалению. Прогрессивное улучшение.

Браузеру уже 7 лет, что от него ждать:

[udzumaki]

Xdevelx, код чекай

[Rustam Bainazarov]

Xdevelx, про это всё я знаю, лучше приведите пример, если есть, нормального рабочего grid в IE10. Я сколько не пытался, ничего нормального из этого не выходило. То ширина элементов будет косая, то они друг на друга, то у элементов контент будет выпадать за границы, то ширины не будет. И таких багов — тьма.

[udzumaki]

Xdevelx, спасибо

[Rustam Bainazarov]

Xdevelx, так и я о том же и писал. Прогрессивное улучшение — для IE на старой спецификации, для других браузеров — в нормальной. Ну или же в любой иной комбинации технологий.