Я не могу подчеркнуть это достаточно - половину боли гридов решают, просто используя autoprefixer на вашем этапе сборки. Напишите свой CSS стандартным способом и просто позвольте авторефиксору выполнить свою работу, автоматически преобразовав все свойства старых спецификаций. Когда вы решите, что не хотите поддерживать IE, просто измените одну строку в конфигурации браузера, и вы удалите весь специфичный для IE код из ваших встроенных файлов.
ользую следующую разметку HTML для моей сетки.
<section class="grid">
<article class="grid-item width-2x height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x">....</article>
<article class="grid-item height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x height-2x">....</article>
</section>
Код SCSS выглядит примерно так:
.grid {
display: grid;
grid-template-columns: repeat( 4, 1fr );
grid-gap: 30px;
align-items: start;
.grid-item {
&.height-2x {
grid-row: span 2;
}
&.width-2x {
grid-column: span 2;
}
}
}
Так как я использую авто-префикс в своем рабочем процессе, он автоматически добавляет все соответствующие свойства с-ms префикс. Я могу подтвердить это с помощью элемента проверки.
Теперь проблема в том, что этот код прекрасно работает в Chrome, Firefox и Opera, но когда я открываю эту страницу в Microsoft Edge или в IE 11, все элементы сетки перекрывают друг друга в первой ячейке. Согласно сэтот сайт эти браузеры поддерживают CSS Grid layout-ms префикс. Я создал CodePen для этого сценария.
Почему это не работает?
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
-ms-grid-rows: (270px)[4];
grid-template-rows: repeat(4, 270px);
grid-gap: 30px;
}
.grid .grid-item {
background-color: #000;
color: #fff;
text-align: center;
line-height: 270px;
}
.grid .grid-item.height-2x {
-ms-grid-row: span 2;
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column: span 2;
grid-column: span 2;
}<section class="grid">
<article class="grid-item width-2x height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x">....</article>
<article class="grid-item height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x height-2x">....</article>
</section>