CSS网格 - 最后一行项太大了

Question

我构建一个跨越页面宽度的小网格（即没有外边距或填充），并在每个网格项之间包含一个装订线。

我的问题是，当从最后一个项目中移除填充/装订线时，会导致此项目变得比其他项目大。

在这里看一支笔：

http://codepen.io/backtofront/pen/yerpvX

相关的商品代码在这里：

[class*='column-'] {
 float: left;
 padding-right: 10px;
 padding-bottom: 10px;
 width: 100%;
 min-height: 1px; 

 &:last-of-type {
  padding-right: 0;
 }      

 img {
  width: 100%;
  display: block;
 }
}

我正在寻找一种方法来实现这一目标而不在每个项目周围添加填充/边距。

谢谢。

Answer 1

这就是我非常喜欢bootstrap网格处理列的方式！

这是你的例子的小提琴： https://jsfiddle.net/c24w1abL/

我使用padding-right: 10px和padding-right: 5px;替换了列类的padding-left: 5px。这使所有列保持一致。 .row获得负边距，以便列重新与原始列宽一致。

下面的代码段使用了scss，所以我不认为该代码片段会起作用吗？ 请参考JSFiddle！

＆＃13;

＆＃13;

/* Base
  -------------------------------------------------------- */

	html {
	  box-sizing: border-box;
	}

	*, *:before, *:after {
	  box-sizing: inherit;
	}

  %clearfix {
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }

/* Grids
  -------------------------------------------------------- */

  $grid-columns: 12; 

  .grid, .row {
    @extend %clearfix;
  }
  
  .row {
    margin: 0 -5px;
  }

  .grid {
    background: tomato;
  }

	[class*='column-'] {
		float: left;
		padding-right: 5px;
    padding-left: 5px;
		padding-bottom: 10px;
		width: 100%;
		min-height: 1px; 

    img {
      width: 100%;
      display: block;
    }
	}
     
  @for $i from 1 through $grid-columns {

    .column-#{$i} { 
      width: 100% / $grid-columns * $i;
    }
  }

＆＃13;

/* Base
  -------------------------------------------------------- */

	html {
	  box-sizing: border-box;
	}

	*, *:before, *:after {
	  box-sizing: inherit;
	}

  %clearfix {
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }

/* Grids
  -------------------------------------------------------- */

  $grid-columns: 12; 

  .grid, .row {
    @extend %clearfix;
  }
  
  .row {
    margin: 0 -5px;
  }

  .grid {
    background: tomato;
  }

	[class*='column-'] {
		float: left;
		padding-right: 5px;
    padding-left: 5px;
		padding-bottom: 10px;
		width: 100%;
		min-height: 1px; 

    img {
      width: 100%;
      display: block;
    }
	}
     
  @for $i from 1 through $grid-columns {

    .column-#{$i} { 
      width: 100% / $grid-columns * $i;
    }
  }

＆＃13;

＆＃13;

＆＃13;