Recently, I've been diving into the world of flexbox and creating my own grid system. Traditionally, when building a grid system using floats, you have to calculate the number of columns per layout and assign percentages for each column's width. However, with flexbox, most tutorials recommend setting flex-direction: row; and flex: 1 for columns to achieve equal size, equal gutter spacing, centering, and placing them all in a single row. On the other hand, after reviewing the flexboxgrid source code on GitHub, it seems they follow the same principles as Bootstrap 3. They utilize a 12-column grid system with fixed widths assigned to columns like col-xs-1 which has a max-width: 8.33%.
Now, I'm curious about the differences between these two approaches and which one is more advantageous. Manually determining the width for each column may be cumbersome, while utilizing the flex grow property can automatically fill the entire viewport with equally sized columns and gutters along the main axis.