Создание запасных вариантов для CSS Grid

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 делителей на 3 столбца по 3 деления с одним и тем же классом.

Я могу сделать это, используя 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

Это та же самая сетка, которую я использовал, используя 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>

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

Что ж, вы можете использовать ширину для column1, column2 и column3, если вы не хотите использовать grid css и, если вам нравится другой дизайн для мобильного представления, вы можете использовать медиазапрос, как упомянуто.

Answer 3

вы можете @ поддерживает codepen

@supports CSS at-rule позволяет вам определять объявления, которые зависят от поддержка браузером одной или нескольких специфических функций CSS. Это называется запросом функции. Правило может быть размещено на верхнем уровне Ваш код или вложенный в любую другую условную группу at-rule.

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

 /* your css flex style or fallback css */