如何为IE11编辑网格模板列 [英] How to edit grid-template-columns for IE11

问题描述

这是我的代码:

grid-template-columns: repeat(auto-fill,minmax(120px, 1fr));

我正在尝试在IE11上使用网格布局.我发现不支持 repeat()，我应该重写它.但是在不知道重复次数的情况下，我找不到任何重写方法.Autoprefixer没有帮助.

I am trying to make my grid layout work on IE11. I found that repeat() is not supported and I should rewrite it. But I could not find any way to rewrite it without knowing the specific number of repeats. Autoprefixer did not help.

这有可能吗?

推荐答案

IE11使用较旧形式的CSS Grid，因此您不能依赖可能已经知道的现代CSS Grid.您可以摆弄旧的网格，但这很痛苦.

IE11 uses an older form of CSS Grid, so you can't rely on the modern CSS Grid you might already know. You can fiddle with the old grid but it's a pain.

我通常要做的是使用 @supports ，有点像用于功能检测的Modernizr媒体查询.IE11无法理解 @supports 或 grid-gap ，因此我可以使用 @supports(grid-gap:0)对较新的浏览器进行功能检测code>并发送现代浏览器的 grid 样式，而较旧的浏览器则获得他们可以理解的 flex 样式.

What I typically do is use @supports, which is kinda like a Modernizr media query for feature detection. IE11 doesn't understand @supports or grid-gap, so I can do feature detection for newer browsers using @supports(grid-gap:0) and send modern browsers grid styles, whereas older browsers get flex styles which they can understand.

方法示例:

/** 
 * IE 11 and older Edge will just get a flex layout
 * Whereas everyone else gets the CSS grid layout
 * We're using @supports for modern browser, which override the flexbox styles
 */

.random-class {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;

  @media (min-width: $sm) {
    flex-direction: row;
  }
}

.random-class-2 {
  margin: 3%;
  width: 94%;

  @media (min-width: $sm) and (max-width: $lg) {
    margin: 2%;
    width: 46%;
  }

  @media (min-width: $lg) {
    margin: 1%;
    width: 31.3%;
  }
}

// New browsers will get CSS grid
// IE11 doesn't understand grid-gap, so this works
@supports (grid-gap: 0) {
  .random-class {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 35px;
    margin: 0;
    width: 100%;

    @media (min-width: $sm) and (max-width: $lg) {
      grid-template-columns: 1fr 1fr;
    }

    @media (min-width: $lg) {
      grid-gap: 25px;
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  // Overrides flexbox width settings above
  .random-class-2 {
    margin: 0;
    width: 100%;
  }
}

这篇关于如何为IE11编辑网格模板列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！