I'm not sure I'm looking at the example you're looking at, but generally: a Flexbox layout will defer to the content, where when you're laying out on a grid, you want the content to defer to the grid. By giving an explicit width, you tell the browser that, in this case, the specified width is what's most important for the layout.

Luckily, this is built into the flexbox model too. By default flexbox uses an element's automatic size as the basis to calculate its new size from.

However if you set flex-basis to zero then it will treat the element as if it was zero width for the purposes of calculating its new size from.

So if all elements have a zero basis then the flex ratio will be the only thing affecting their final width:

http://codepen.io/anon/pen/WvGLML?editors=110

I see, That makes sense thankyou

When you use gutters sometimes the math doesn't work out quite right. http://codepen.io/anon/pen/xGEMYY