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

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

这是您的示例的一个小提琴： https://jsfiddle.net/c24w1abL/

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

下面的 sn-p 使用 scss 所以我不认为 sn-p 会工作？ 请参考JSFiddle！

/* 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;
    }
  }

/* 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;
    }
  }