Question

是否可以用旧版浏览器的替代css替换3列grid？我不想使用bootstrap或类似的网格框架。可以使用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);
}

CSS网格回退

1 个答案: