Search code examples
htmlcssinternet-explorergridtailwind-css

grid-template-columns is not working to ie11?

I'm using tailwind css and grid-template-columns is not working in IE11.

How can I separate so that it will function on IE11?

grid-template-columns: repeat(2, minmax(0, 1fr))

  <div
    class="mx-15 tb:grid tb:grid-cols-2 tb:gap-x-40 tb:mt-20 tb:mx-40 pc:w-1280 pc:mx-auto pc:mt-0 grid-column"
  >
    <article class="mb-100">
      <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
        2020.10.26
      </p>
      <div
        class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
      >
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaa</span>
      </div>
    </article>
    <article class="mb-100">
      <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
        2020.10.26
      </p>
      <div
        class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
      >
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaa</span>
      </div>
    </article>
    <article class="mb-100">
      <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
        2020.10.26
      </p>
      <div
        class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
      >
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaa</span>
      </div>
    </article>
  </div>

Now, the issue is this code works just fine in Chrome, Firefox and Opera, but when I open this page in Microsoft Edge or in IE 11 all grid items are overlapping each other at first cell.

Solution

  • The grid-template-columns of Internet Explorer can be compatible with the hierarchical relationship -ms-grid. Then, you can set the ratio of rows and columns in the sub-style. Here is the example：

    .wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 300px 300px 300px;
  grid-template-columns: 300px 300px 300px;
}

.box1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.box2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.box3 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
    <div class="wrapper">
  <article class="box1">
    <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
      2020.10.26
    </p>
    <div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaa</span>
    </div>
  </article>
  <article class="box2">
    <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
      2020.10.26
    </p>
    <div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaa</span>
    </div>
  </article>
  <article class="box3">
    <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
      2020.10.26
    </p>
    <div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaa</span>
    </div>
  </article>
</div>

    Result in IE:

    enter image description here