1

I'm kind of confused how the neat grid works when using block-collapse - assuming a 3 column grid, the first two column result in a width of something like 34....% and the third column is around 31...% so I'm not getting three equal columns next to each other.

am I missing something here?

user1678736
  • 2,133
  • 4
  • 16
  • 10

1 Answers1

1

block-collapse removes the margin gutter, and adds it to the block. This works across the row until the end, when the final block just takes up the remaining space. This is why you are seeing a smaller last column.

If you have a row, and set that to $display: table, then children of it will be displayed as table cells, which will give you an even distribution across the row which I think is what you are after.

Pen is here:

http://codepen.io/mikehdesign/full/jPmWza/

Here is an image showing a standard set of columns, block-collapse and a table display:

enter image description here

Mike Harrison
  • 1,020
  • 2
  • 15
  • 42