Creating fallbacks for CSS Grid

Question

I have an interesting dilemma, I have a layout that consists if a container with 9 div's inside of it. Each div has a class of column-1, column-2 or column-3 on it.

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

What I need to do is break these 9 div's into 3 columns of 3 divs with the same class.

I can do this using CSS Grid easily enough, but I need to also create fallbacks for browsers that do not support GRID yet. Which is where I'm struggling.

An example of the markup I am working with is here: https://codepen.io/kirstyburgoine/pen/LmXGZJ

A restriction of this project is that the markup cannot be changed in any way, so this has to be done with CSS (or possibly javascript if thats the only way).

I thought about using flexbox, setting flex-direction: column and then setting an order on each class. For example: .column-1 { order: 1; }, .column-2 { order: 2; }, .column-3 { order: 3; }. This brought them all into the correct order but of course theye were all in one column instead of 3 and I can't see a way to break a column into a new column with flex. :(

Anyone have any ideas?

You can use `flexbox`, but the issue with browser support will pop up there also. — Abin Thaha, May 17 '18 at 14:10
Plenty of solutions here: https://stackoverflow.com/q/33359157/3597276 — Michael Benjamin, May 17 '18 at 14:27

patelarpan · Answer 1 · 2018-05-18T04:50:17.493

0

you can @supports codepen

The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

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

 /* your css flex style or fallback css */

edited May 18 '18 at 04:50

answered May 17 '18 at 14:13

patelarpan

7,188
2
20
25

score 0 · Answer 2 · answered May 17 '18 at 14:15

This is the same grid I did using 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>

score 0 · Answer 3 · answered May 17 '18 at 14:24

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

Well you can use a width for column1, column2 and column3 if you don't want to use grid css and like if you different design for mobile view then you can use media query like a mentioned.

Creating fallbacks for CSS Grid

3 Answers3