CSSグリッドフォールバック

Question

旧式のブラウザで3列gridを代替CSSに置き換えることはできますか？私はブートストラップや同様のグリッドフレームワークを使いたくない。 inline-blockなどを使用して定期的なCSSでこれを行うことはできますか？

機能クエリと私のCSSは、このようなものです：

@supports (display: grid) { 
.skillsContainer { 
    width: 700px; 
    margin: auto; 
    display: grid; 
    grid-template-columns: 200px 200px 200px; 
    grid-gap: 35px; 
    padding: 60px 0; 
} 

.skills div { 
    color: #fff; 
    border-radius: 5px; 
    padding: 20px; 
    font-size: 150%; 
    } 
} 

マークアップ：

<div className="skillsContainer"> 
      <div> 
      <span className="chart" data-percent="10"> 
       <span className="percent">number</span> 
      </span> 
      <h4>HTML5</h4> 
      </div> 
      <div> 
      <span className="chart" data-percent="10"> 
       <span className="percent">number</span> 
      </span> 
      <h4>CSS3</h4> 
      </div> 
      <div> 
      <span className="chart" data-percent="10"> 
       <span className="percent">number</span> 
      </span> 
      <h4>ReactJs</h4> 
      </div> 
      <div> 
      <span className="chart" data-percent="75"> 
       <span className="percent">number</span> 
      </span> 
      <h4>jQuery</h4> 
      </div> 
      <div> 
      <span className="chart" data-percent="10"> 
       <span className="percent">number</span> 
      </span> 
      <h4>WordPress</h4> 
      </div> 
      <div> 
      <span className="chart" data-percent="10"> 
       <span className="percent">number</span> 
      </span> 
      <h4>Fireworks</h4> 
      </div>  
     </div> 

Answer 1

申し訳リンクのみをドロップするが、この記事では、実際にはかなりうまく説明するために：

Browser Compatibility for CSS Grid Layouts with Simple Sass Mixinsを

要点は：

display: -ms-grid; 
-ms-grid-columns: ???; 
-ms-grid-rows: ???; 

とも：

@mixin grid-child ($col-start, $col-end, $row-start, $row-end) { 
    -ms-grid-column: $col-start; 
    -ms-grid-column-span: $col-end - $col-start; 
    -ms-grid-row: $row-start; 
    -ms-grid-row-span: $row-end - $row-start; 
    grid-column: #{$col-start}/#{$col-end}; 
    grid-row: #{$row-start}/#{$row-end}; 
} 
.child { 
    @include grid-child(2, 3, 2, 3); 
}