Страницы

Поиск по вопросам

воскресенье, 22 декабря 2019 г.

Grid-разметка в IE11

#css #вёрстка #internet_explorer #css_grid 


Здравствуйте, подскажите, как мне изменить стили 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;
}


  
Каталог товаров

  

    

      

        1
        
      

    

    

      

        2
        
      

    

    

      

        3
        
      

    

    

      

        4
        
      

    

  

  


    

      

        5
        
      

    

    

      

        6
        
      

    

    

      

        7
        
      

    

    

      

        8
        
      

    

  







Интересует вопрос по префиксам, как правильно под 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}


  
Каталог товаров

  

    

      

        1
        
      

    

    

      

        2
        
      

    

    

      

        3
        
      

    

    

      

        4
        
      

    

  

  


    

      

        5
        
      

    

    

      

        6
        
      

    

    

      

        7
        
      

    

    

      

        8
        
      

    

  







Особенность состоит в основном в том, что в ие нужно прописывать весть список колонок
вместе с отступами - 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;
}


  
Каталог товаров

  

    

      

        1
        
      

    

    

      

        2
        
      

    

    

      

        3
        
      

    

    

      

        4

Автор: на
Ярлыки: , , , ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)