Здравствуйте, подскажите, как мне изменить стили grid-разметки под IE11, во всех
браузерах, кроме этого отображается корректно. Даже gulp-autoprefixer не спасает (не
знаю в чем причина), в общем сам пример:
.first-row {
display: grid;
grid-gap: 16px;
margin: 16px 0;
grid-template-columns: 1fr 1fr 1fr;
background-color: #fff;
color: #444;
}
.first-row .box {
background-color: #444;
color: #fff;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.col0 {
grid-column: 1;
grid-row: 1 / 3;
height: 50px;
}
.col1 {
grid-column: 2;
grid-row: 1 / 2;
height: 17px;
}
.col2 {
grid-column: 2;
grid-row: 2;
height: 17px;
}
.col3 {
grid-column: 3;
grid-row: 1 / 3;
height: 50px;
}
.second-row {
display: grid;
grid-gap: 16px;
margin: 16px 0;
grid-template-columns: 1fr 1fr 1fr 1fr;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.col4 {
grid-column: auto;
grid-row: 1;
height: 17px;
}
.col5 {
grid-column: auto;
grid-row: 1;
height: 17px;
}
.col6 {
grid-column: auto;
grid-row: 1;
height: 17px;
}
.col7 {
grid-column: auto;
grid-row: 1;
height: 17px;
}
Интересует вопрос по префиксам, как правильно под IE11 записать, например, grid-row:
1 / 3 или grid-gap: 16px, в документации не очевидно...
Ответы
Ответ 1
Не добавляйте фиксированную высоту для самих клеток грида. Добавляйте высоту их детям.
К сожалению, автопрефиксов для гридов в IE будет недостаточно. И вообще, автопрефиксы
бывают разные с разной степенью качества и направленности, универсальных нет. Но выход
есть, и это миксины.
А если понимать особенности гридов в IE, то можно и вручную:
/**
* Eric Meyer's Reset CSS v2.0
(https://meyerweb.com/
eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.first-row {
display: -ms-grid;
display: grid;
grid-gap: 16px;
margin: 16px 0;
-ms-grid-columns: 1fr 16px 1fr 16px 1fr;
-ms-grid-rows: 1fr 16px 1fr;
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: 1fr 1fr 1fr;
background-color: #fff;
color: #444;
}
.first-row .box {
background-color: #444;
color: #fff;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.col0 {
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
grid-row: 1 / 3;
}
.col0 h2{ height: 50px;}
.col1 {
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-column: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1 / 2;
}
.col1 h2{ height: 17px;}
.col2 {
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-column: 2;
-ms-grid-row: 3;
-ms-grid-row-span: 1;
grid-row: 2;
}
.col2 h2{ height: 17px;}
.col3 {
-ms-grid-column: 5;
-ms-grid-column-span: 1;
grid-column: 3;
-ms-grid-row: 1;
-ms-grid-row-span:3;
grid-row: 1 / 3;
}
.col3 h2{ height: 50px;}
.second-row {
display: -ms-grid;
display: grid;
grid-gap: 16px;
margin: 16px 0;
-ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.col4 {
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: auto;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1;
}
.col4 h2{ height: 17px;}
.col5 {
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-column: auto;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1;
}
.col5 h2{ height: 17px;}
.col6 {
-ms-grid-column: 5;
-ms-grid-column-span: 1;
grid-column: auto;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1;
}
.col6 h2{ height: 17px;}
.col7 {
-ms-grid-column: 7;
-ms-grid-column-span: 1;
grid-column: auto;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
}
.col7 h2{ height: 17px;}
a{color:#fff}
Особенность состоит в основном в том, что в ие нужно прописывать весть список колонок
вместе с отступами - gap для ие не существует. То есть, если у вас ряд 1fr 1fr с гапом
в 16px, то в ие это будет ряд 1fr 16px 1fr. Соответственно место у второй колонки будет
не второе, а третье. А ширину колонки(ряда) с ее местом тоже нужно писать в разных
свойствах -ms-grid-column-span - ширина, -ms-grid-column - место колонки.
Ответ 2
Нужны префиксы и IE требует явно прописывать ячейки грида.
IE не поддерживает grid-gap - вместо него надо использовать лишние пустые ячейки.
Вместо высоты лучше указывать высоту рядов.
Для объединения ячеек надо использовать span в соответствующем виде.
Вот для первой строки, для второй аналогично: https://jsfiddle.net/ntv0n8s1/1/
.first-row {
display: -ms-grid;
display: grid;
grid-gap: 16px;
margin: 16px 0;
-ms-grid-columns: 1fr 16px 1fr 16px 1fr;
grid-template-columns: 1fr 1fr 1fr;
-ms-grid-rows: 17px 16px 17px;
grid-template-rows: 17px 17px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
border-radius: 5px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.col0 {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
grid-row: span 2;
}
.col1 {
-ms-grid-column: 3;
grid-column: 2;
-ms-grid-row: 1;
grid-row: 1;
}
.col2 {
-ms-grid-column: 3;
grid-column: 2;
-ms-grid-row: 3;
grid-row: 2;
}
.col3 {
-ms-grid-column: 5;
grid-column: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
grid-row: span 2;
}
