IE11 and CSS grid

Question

Is this layout remotely possible in IE11 (very crude example)?

$(document).on('click', '.js-toggle-hide', function(e){
  e.preventDefault();
  $(this).parent().parent().find('.js-hide').toggle();
});

@charset "UTF-8";
.c-sidebar {
  display: grid;
  grid-template-columns: 120px auto;
  outline: 1px solid #ccc;
  overflow: auto;
}

.c-cat {
  display: grid;
  grid-template-columns: 120px auto;
  grid-template-rows: auto;
}
.c-cat__name {
  grid-row: 1 / 1000;
}
.c-cat__toggle {
  grid-row: 1 / 999;
  min-width: 120px;
}
.c-cat__subcat {
  grid-column: 3 / 4;
  min-width: 120px;
}
.c-cat__subcat--all {
  grid-column: 2 / 4;
}

/* decoration */
body {
  padding: 15px;
  background: #eee;
  font-size: 11px;
}

.c-cell {
  background: #fff;
  outline: 1px solid #ccc;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-sidebar">
    <div class="c-cell">All Categories</div>
    <div>
      <div class="c-cat">
        <div class="c-cat__name  c-cell">Sales</div>
        <div class="c-cat__toggle  c-cell">
          <a href="" class="js-toggle-hide">All items</a>
        </div>
        <div class="c-cat__subcat  c-cell  js-hide">Export sales</div>
        <div class="c-cat__subcat  c-cell  js-hide">Other sales</div>
        <div class="c-cat__subcat  c-cell  js-hide">Product sales</div>
        <div class="c-cat__subcat--all  c-cell  js-hide"><b>All items</b></div>
      </div>
    </div>
  </div>

Note that the number of items in the right columns is undefined (types of sales), client can add/remove them.

Are there any css tricks I'm not aware of?

The alternative is to use tables with complex js/jquery code (this is just a part of the code but it represents my dilemma perfectly) and that would be very tedious work.

score 0 · Answer 1 · answered Feb 27 '19 at 15:40

0

My recommendation is if you want to be grid modern and still support something like IE11....then start with in display: flex and then do a media support to add your grid like this:

@supports (display: grid) { #_your css grid here _# }

So then you can add all your grid there....you are not necessarily repeating if you do this you are just doing the grid part here(grid-template, columns, rows, etc) and bypass any other styling like color, font, px and etc...

answered Feb 27 '19 at 15:40

Riskbreaker

4,621
1
23
31

I don't think this particular table-like layout is possible using css flexbox – Dusan Stojanovic Feb 27 '19 at 15:47
then just do it tabular and use media to support grid – Riskbreaker Feb 27 '19 at 15:55
I mean they are all divs... so flex should be able to handle that but you can do it in multiple ways...the point of my answer is do the media support for grid... – Riskbreaker Feb 27 '19 at 16:01
This IS tabular data, so using tables is the most appropriate solution. But the amount of work and code that css grid solves in this particular case is astonishing (like I sad, this is just a small portion of the complete layout). Thus my question. And if I go with tables I don't really need `@supports` – Dusan Stojanovic Feb 27 '19 at 16:07
yeah i see your point did you try `-ms-grid`? check this article: https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66 – Riskbreaker Feb 27 '19 at 16:09
^ I did, no dice. The variable number of `
` is the culprit - IE11 needs it.
– Dusan Stojanovic Feb 27 '19 at 16:14
ie11 can go dump itself grr...check this one other article https://stackoverflow.com/questions/45786788/css-grid-layout-not-working-in-edge-and-ie-11-even-with-ms-prefix – Riskbreaker Feb 27 '19 at 16:20

IE11 and CSS grid

1 Answers1