哪个是CSS跨浏览器布局的最佳替代方案？

Question

我希望有一个布局（如下例所示），避免使用像Foundation / Bootstrap这样的框架，但同时允许我至少在IE10，Firefox，Chrome中使用。

我看到的是CSS Grid，但在IE10中不支持。

Answer 1

你正在寻找这样的东西吗？

.row {
  
  max-width: 114rem;
  margin: 0 auto; 
  }
  
  .row:not(:last-child) {
    margin-bottom: 8rem; 
    }
    
  .row:after {
    content: "";
    display: table;
    clear: both;
    }
  .row [class^="col-"] {
    float: left; 
   }
    .row [class^="col-"]:not(:last-child) {
      margin-right: 6rem; 
    }
    
  .row .col-1-of-2 {
    width: calc((100% - 6rem) / 2); 
    background-color: orange;
    }
    
  .row .col-1-of-3 {
    width: calc((100% - 2 * 6rem) / 3); 
    background-color: orange;
    }
    
  .row .col-2-of-3 {
    width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem); 
    background-color: orange;
    }
    
  .row .col-1-of-4 {
    width: calc((100% - 3 * 6rem) / 4); 
    background-color: orange;
    }
    
  .row .col-2-of-4 {
    width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem); 
    background-color: orange;
    }
    
  .row .col-3-of-4 {
    width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); 
    background-color: orange;
    }

<section class="grid-test">

            <div class="row">
                <div class="col-1-of-2">
                    Col 1 of 2
                </div>
                <div class="col-1-of-2">
                    Col 1 of 2
                </div>
            </div>

            <div class="row">
                <div class="col-1-of-3">
                    Col 1 of 3
                </div>
                <div class="col-1-of-3">
                    Col 1 of 3
                </div>
                <div class="col-1-of-3">
                    Col 1 of 3
                </div>
            </div>

            <div class="row">
                <div class="col-1-of-3">
                    Col 1 of 3
                </div>
                <div class="col-2-of-3">
                    Col 2 of 3
                </div>
           </div>

            <div class="row">
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-1-of-4">
                        Col 1 of 4
                </div>                
            </div>

            <div class="row">
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-2-of-4">
                    Col 2 of 4
                </div>
            </div>

            <div class="row">
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-3-of-4">
                    Col 3 of 4
                </div>
            </div>
        </section>