是否有一个网格系统对列使用基于百分比的宽度，对排水沟使用 px 值？

Question

我正在寻找 IE11 支持的网格解决方案，它使用基于百分比的列宽和基于像素的间距。我正在寻找具有均匀间隔的一半、三分之一、四分之一、六分之一和十二分之一的网格布局，其中边距可能会因断点而异。这可能吗？

@import "compass/css3";

* {
  @include box-sizing(border-box);
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;

  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
    float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
    width: 66.66%;
}
.col-1-3 {
    width: 33.33%;
}
.col-1-2 {
    width: 50%;
}
.col-1-4 {
    width: 25%;
}
.col-1-8 {
    width: 12.5%;
}

.module {
  padding: $pad;
  background: #eee;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

body {
    padding: 10px 50px 200px;
  background: url(https://s.cdpn.io/3/dark_wall_@2X.png);
  background-size: 300px 300px;
}
h1 {
  color: white;
  em {
    color: #666;
    font-size: 16px;
  }
}

Chris Coyier 发布了一个解决方案，但它有点不稳定，因为间距是由列的右侧填充定义的：https://codepen.io/chriscoyier/pen/eGcLw 这意味着，列宽不准确。例如，2 列布局的第一列将小于 50% 以占装订线，但第二列将正好是网格宽度的 50%，因为最后一个子级没有右侧装订线。

我在 IE11 的 flex 和网格布局方面遇到了一些问题，所以我打算只使用浮动块元素。

Answer 1

最终代码将完全取决于您想要的网格类型，但也许这会对您有所帮助：

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

/* Let's assume that the gap = 20px */

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: -20px; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / (2 / 1)); }

.col-1-3 { width: calc(100% * 1 / 3 - 20px / (3 / 2)); }
.col-2-3 { width: calc(100% * 2 / 3 - 20px / (3 / 1)); }

.col-1-4 { width: calc(100% * 1 / 4 - 20px / (4 / 3)); }
.col-2-4 { width: calc(100% * 2 / 4 - 20px / (4 / 2)); }

<div class="grid">
   <div class="col-1-2"><h3>1/2</h3></div>
   <div class="col-1-2"><h3>1/2</h3></div>
</div>

<div class="grid">
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-1-3"><h3>1/3</h3></div>
</div>

<div class="grid">
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-2-3"><h3>2/3</h3></div>
</div>

<div class="grid">
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
</div>

<div class="grid">
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-2-4"><h3>2/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
</div>

使用 SCSS 语法，在上面的示例中，col width 是这样计算的：

calc(100% * #{$colSize} / #{$gridSize} - #{$gap} / (#{$gridSize} / (#{$gridSize} - #{$colSize})));

并且在 [class*='col-'] 上用 margin-right 设置差距。

你当然可以写一个 mixin 来动态创建选择器：

$gap: 20px;
$maxGridCol: 5;

@for $i from 1 through $maxGridCol {
   @for $y from 1 through $i {
      [class*="col-#{$y}-#{$i}"] {
         width: calc(100% * #{$y} / #{$i} - (#{$gap} / (#{$i} - #{$y})));
      }
   }
}

Answer 2

这是我想到的。我不是数学家，所以我不能告诉你为什么这些宽度方程有效，或者是否有更好的算法。

https://codepen.io/richiegarcia/pen/YBEVQR

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: 0; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / 2); }
.col-1-3 { width: calc(100% * 1 / 3 - 20px / 1.5); }
.col-1-4 { width: calc(100% * 1 / 4 - 20px / 1.33); }
.col-1-6 { width: calc(100% * 1 / 6 - 20px / 1.2); }
.col-1-12 { width: calc(100% * 1 / 12 - 20px / 1.09); }

Answer 3

如果您将 colsize 以百分比形式存储在数据库中，则可以使用此转换将其更改为 col-size。

$col_size = (isset($col_size_percentage) ? ($col_size_percentage / 100) * 12 : 12);

这是 PHP 和一个班轮。

<div class="col-md-<?= $col_size ?>"> Your size div </div>

是否有一个网格系统对列使用基于百分比的宽度，对排水沟使用 px 值？

Is there a grid system that use percentage-based width for columns and px values for gutters?

html

css

grid-layout

internet-explorer-11