为 CSS Grid 创建后备答案

【问题标题】：Creating fallbacks for CSS Grid为 CSS Grid 创建后备
【发布时间】：2018-05-18 12:50:17
【问题描述】：

我有一个有趣的困境，我有一个布局，其中包含一个包含 9 个 div 的容器。每个 div 上都有一个 column-1、column-2 或 column-3 类。

<div class="grid cols-3">

   <div class="col column-1">
      column-1
   </div>
   <div class="col column-2">
      column-2
   </div>
   <div class="col column-3">
      column-3
   </div>
   <div class="col column-1">
    column-1
  </div>
  <div class="col column-2">
    column-2
  </div>
  <div class="col column-3">
    column-3
  </div>
  <div class="col column-1">
    column-1
  </div>
    <div class="col column-2">
    column-2
  </div>
  <div class="col column-3">
    column-3
  </div>
</div>

我需要做的是将这 9 个 div 分成 3 列，每列 3 个 div 具有相同的类。

我可以很容易地使用 CSS Grid 做到这一点，但我还需要为尚不支持 GRID 的浏览器创建后备。这是我苦苦挣扎的地方。

我正在使用的标记示例如下：https://codepen.io/kirstyburgoine/pen/LmXGZJ

这个项目的一个限制是不能以任何方式更改标记，因此必须使用 CSS（或者如果这是唯一的方法，可能是 javascript）来完成。

我考虑过使用 flexbox，设置flex-direction: column，然后在每个类上设置顺序。例如：.column-1 { order: 1; }、.column-2 { order: 2; }、.column-3 { order: 3; }。这使它们全部按正确的顺序排列，但当然它们都在一个列而不是 3 列中，我看不出用 flex 将列分成新列的方法。 :(

有人有什么想法吗？

【问题讨论】：

你可以使用flexbox，但是那里也会弹出浏览器支持的问题。
这里有很多解决方案：stackoverflow.com/q/33359157/3597276

标签： html css flexbox css-grid

【解决方案1】：

这与我使用 flexbox 所做的网格相同

.grid {
  display: flex;
  flex-wrap: wrap;
}

.col {
  width: 31%;
  margin: 1%;
}

.column-1 {
  background-color: #ccc; 
}

.column-2 {
  background-color: yellow;
}

.column-3 {
  background-color: blue;
}

<div class="grid cols-3">
  <div class="col column-1">
    column-1
  </div>
  <div class="col column-2">
    column-2
  </div>
  <div class="col column-3">
    column-3
  </div>
  <div class="col column-1">
    column-1
  </div>
  <div class="col column-2">
    column-2
  </div>
  <div class="col column-3">
    column-3
  </div>
  <div class="col column-1">
    column-1
  </div>
    <div class="col column-2">
    column-2
  </div>
  <div class="col column-3">
    column-3
  </div>
  
</div>

【讨论】：

【解决方案2】：

.grid {
  width: 100%;
  margin-bottom: 10px;
}

.col {
  height: 100px;
  margin: 1%;
}

.column-1 {
  background-color: #ccc; 
}

.column-2 {
  background-color: yellow;
}

.column-3 {
  background-color: blue;
}


.column-1, .column-2, .column-3 {
  width: 31%;
  float: left;
}
@media only screen and (max-width: 600px) {
  .column-1, .column-2, .column-3 {
    width: 100%;
    float: left;
  }
}

<div class="grid cols-3">

  <div class="col column-1">
    column-1
  </div>
  <div class="col column-2">
    column-2
  </div>
  <div class="col column-3">
    column-3
  </div>
  <div class="col column-1">
    column-1
  </div>
  <div class="col column-2">
    column-2
  </div>
  <div class="col column-3">
    column-3
  </div>
  <div class="col column-1">
    column-1
  </div>
    <div class="col column-2">
    column-2
  </div>
  <div class="col column-3">
    column-3
  </div>
  
</div>

如果您不想使用网格 css，您可以为 column1、column2 和 column3 使用宽度，如果您为移动视图设计不同的设计，那么您可以使用前面提到的媒体查询。

【讨论】：

【解决方案3】：

你可以@supports codepen

@supports CSS at 规则允许您指定依赖于的声明浏览器对一项或多项特定 CSS 功能的支持。这是称为特征查询。规则可以放在顶层您的代码或嵌套在任何其他条件组中。

@supports (display: grid) {
  /* your css grid style */
}

 /* your css flex style or fallback css */

【讨论】：