IE11和CSS网格

Question

在IE11中是否可以远程进行这种布局（非常简单的示例）？

 $(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> 

请注意，右列中的项目数未定义（销售类型），客户可以添加/删除它们。

有我不知道的CSS技巧吗？

替代方法是使用带有复杂js / jquery代码的表（这只是代码的一部分，但这完全代表了我的难题），这将是非常繁琐的工作。

Answer 1

我的建议是，如果您想成为网格现代者并且仍然支持IE11之类的东西。...然后从display: flex ，然后做一个媒体支持来添加网格，如下所示：

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

因此，您可以在其中添加所有网格...。如果执行此操作，则不必重复，您只需要在此处执行网格部分（网格模板，列，行等），并绕过其他任何样式，例如颜色，字体，px等...