Question

我有一个有趣的困境，我有一个布局，如果一个容器内有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的新列。：（

有人有什么想法吗？

Answer 1

你可以@supports codepen

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

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

 /* your css flex style or fallback css */

Answer 2

这与我使用flexbox

所做的网格相同

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

.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的宽度，如果您对移动视图采用不同的设计，则可以使用像上面提到的媒体查询。

为CSS Grid创建回退

3 个答案: