Есть ли способ динамически создавать сетки CSS для IE?

Я создаю веб-сайт php, на котором я извлекаю контент из базы данных и при необходимости создаю html-элементы div в своем выводе на страницу. Затем я форматирую страницу, используя сетки CSS. Этот процесс отлично работает в Chrome, Firefox, Edge и Safari. Я не могу заставить его работать правильно в Internet Explorer 11.

Я пытаюсь включить -ms в свой код. По какой-то причине при просмотре в Internet Explorer моя сетка накладывается на первую строку первого столбца. Я взял свой рабочий код и прогнал его через Autoprefixer CSS, который не дал мне ничего полезного.

Образец HTML:

<div class = "main">
<div class = "head">Title of grid displayed here</div>
//Inside content I build <div> based on return from db//
<div class = "content">
            //the info <div> stopped at the end of the loop//
        <div id = "info"></div> 
        <div id = "info"></div>
        <div id = "info"></div>
        <div id = "info"></div>
        <div id = "info"></div>
        <div id = "info"></div>
</div>
</div>

Образец CSS

.main {
/*Internet Explorer*/
display: -ms-grid;
-ms-grid-columns:100%;
-ms-grid-rows: auto 20px auto;
/*All other browsers*/
display: grid;
grid-template-columns:100%;
grid-gap: 20px 20px;
margin-bottom: 5%;
grid-template-areas:
"head"
"content";
}

.head {
/*Internet Explorer*/
display: -ms-grid;
-ms-grid-row: 1;
-ms-grid-column: 1fr;
/*All other browsers*/
grid-area: head;
display: grid;
margin: 2% 0 2% 0;
text-align: center;
}

.content {
/*Internet Explorer*/
display: -ms-grid;
-ms-grid-row: 3;
-ms-grid-columns: (1fr)[3];
-ms-grid-column-span: 1;
/*All other browsers*/
 grid-area: content;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
 margin-left: 10px;
 margin-right: 10px;
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-gap: 10px;
 grid-column-gap: 10px;
}

#info {
outline: solid #515151;
}

.info{
 grid-area: info;

}

Вывод отлично выглядит в Chrome, Firefox, Safari и даже Edge. Я просто не могу заставить его работать в IE.

Ваш автопрефикс вам не поможет. Проблема в том, что auto-fit не поддерживается в IE11. У меня была такая же проблема, как и у вас некоторое время назад, но в итоге я написал резервную копию JS для IE. Хотя это тоже не лучший подход, так как если у вас отображается слишком много контента, производительность может сильно упасть.

— 24.06.2019 21:56

Попробуйте сослаться на эту ссылку, может помочь понять, как заставить ее работать для IE. Ссылка: blog.datawrapper.de/prefixed-css-grid-with-js

— 25.06.2019 03:59

css internet-explorer css-grid

24.06.2019 20:59

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

927

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я решил это с помощью CSS Grid только в браузерах, поддерживающих Grid, в остальных случаях использую Flexbox.

Запасной вариант Flexbox для CSS Grid Layout

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.grid-container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid blue;
}
.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 30%; /* IE11 */
  margin: 1.6%; /* IE11 */
  background: rgb(242, 248, 207);
  border: 4px dashed black;
}
/* This will only activate the Grid in browsers that support it */
@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    justify-content: space-between;
  }
  .grid-item {
    width: 100%;
    background: rgb(243, 242, 242);
    margin: 0;/* We will use grid-gap instead of margin */
  }
}

    <div class = "grid-container">
      <div class = "grid-item">1</div>
      <div class = "grid-item">2</div>
      <div class = "grid-item">3</div>
      <div class = "grid-item">4</div>
      <div class = "grid-item">5</div>
      <div class = "grid-item">6</div>
      <div class = "grid-item">7</div>
      <div class = "grid-item">8</div>
    </div>

Я думаю, что мы можем получить лучшие результаты, используя медиа-запросы, надеюсь, я помог вам ?.

Это было идеальным решением. IE - это такая боль.

— 23.10.2019 16:51

13.10.2019 19:31