使用渐变 css3 重新创建网格

Question

我正在尝试生成与下图具有相同效果的渐变示例：

这只是一列。

这是我掌握的信息：

ContainerWidth: 960px;    
GutterWidth:20px;         (GR + GL)
NumberOfColumns:16;       (C * 16)
ColumnWidth:40px          (C)

注意：以上信息是动态的，用户可以更改此信息，一旦窗口大小调整到容器宽度以下，它就会设置为 100%，因此我需要动态百分比。

我确实尝试过使用色标并成功了，但它似乎太过分了。

编辑我用色标发布了答案，但 Majky 发布的答案绝对是正确的方法！

Answer 1

试试这个 CSS3 条纹模式。它应该可以满足您的需求。

这是链接：http://lea.verou.me/css3patterns/#vertical-stripes

所以您需要做的就是更改以下代码以满足您的需求。

background-color: gray;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;

它比为每一列写 css 更好。

例如此代码基于您的数据（左右两侧有边框）

更新现在没有边框，只有 CSS！ 使用 2 种渐变，一种用于边框条纹，另一种用于重复条纹。删除百分比。现在它变魔术了！

background-color: #111111;
background-image: linear-gradient(90deg, transparent 40px, #444444 20px ),
linear-gradient(90deg, transparent 940px, #222222 10px); 
background-size: 60px, 950px;
background-position: 10px, 10px;

更新jsFiddle preview

希望这会有所帮助！

Answer 2

对于那些希望从具有自定义属性的渐变创建网格的人来说，这就是我使用 sass/scss 实现此目的的方法：

@mixin buildGridGradient($c1: #444, $c2: #111, $c3: #222, $gutter: $gutterWidth, $nc: $numberOfColumns, $c: $columnWidth) {
  $gr: ();
  $wgr: ();
  $halfGutter: $gutter / 2;
  $resetGutter: $halfGutter;
  $from:left;
  $to:right;

  @for $columns from 0 through $nc {

    @if $columns > 0 {
      $resetGutter: $gutter;
    }
    @if $columns != 16 {
      $gutterLeftStart :    strip-units(perc($resetGutter * $columns)) + strip-units(perc($c * $columns));
      $gutterLeftEnd :      $gutterLeftStart + strip-units(perc($halfGutter));
      $gridLeft :           $gutterLeftEnd;
      $gridRight :          $gridLeft + strip-units(perc($c));
      $gutterRightStart :   $gridRight;
      $gutterRightEnd :     $gutterRightStart + strip-units(perc($halfGutter));

      $gutterLeftStartWK : $gutterLeftStart / 100;
      $gutterLeftEndWK   : $gutterLeftEnd / 100;
      $gridLeftWK        : $gridLeft / 100;
      $gridRightWK       : $gridRight / 100;
      $gutterRightStartWK: $gutterRightStart / 100;
      $gutterRightEndWK  : $gutterRightEnd / 100;

      $wgr: join($wgr, unquote("color-stop(#{$gutterLeftStartWK}, green)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gutterLeftEndWK}, green)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gridLeftWK}, red)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gridRightWK}, red)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gutterRightStartWK}, green)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gutterRightEndWK}, green)"), comma);

      $gr: join($gr, unquote("green #{$gutterLeftStart}%"), comma);
      $gr: join($gr, unquote("green #{$gutterLeftEnd}%"), comma);
      $gr: join($gr, unquote("red #{$gridLeft}%"), comma);
      $gr: join($gr, unquote("red #{$gridRight}%"), comma);
      $gr: join($gr, unquote("green #{$gutterRightStart}%"), comma);
      $gr: join($gr, unquote("green #{$gutterRightEnd}%"), comma);
    }
  }
  $prefixes: (-webkit-, -moz-, -ms-, -o-);
  background-image: -webkit-gradient(linear, #{$from} 50%, #{$to} 50%, #{$wgr});
  @each $prefix in $prefixes {
    background-image: #{$prefix}linear-gradient(#{$from}, #{$gr});
  }
}

上面的 mixin 效果非常好，虽然 jsfiddle 确实支持 sass，但似乎它要么已经过时，要么不接受一些参数，所以我在下面的演示中发布了结果。

演示： http://jsfiddle.net/shannonhochkins/DRuSk/