Ignition also comes with a flexbox based grid. The cool part is the flex-grid works the same way as the CSS Grid with Ignition, and requires no additional classes or changes from grid! Ignition uses calc() to make the flexed items have widths and removes the margins from the calculation. This way there is no need for paddings or column or row classes! So the markup stays the same.
There is also a flex class which will simply flex one row of items. This can be extremely useful for some situations.
IE11 will use the flex-grid by default, whether you choose to use grid or flex-grid.
The one thing flex-grid can do that grid cannot is the ability to flex.
This is because the items don’t require a span class.
If you don’t add a span class, your items will just flex to fill what space it finds in the row. It’s good to use when grid items might get added without any span specified. Then again, without any specification, it will try to squish as many items onto one row.
Once you add a span class, the item will no longer flex, but have a width in percentage. At that point the flex-grid and regular grid are very similar.
<div class="flex-grid">
<div class="item span-4 medium-span-5"></div>
<div class="item span-6 medium-span-7"></div>
<div class="item span-2 medium-span-4"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>Here is the output of the above:
The Good and The Bad
Besides for the items being able to flex, the other thing flex-grid has is that the items can be animated or have transitions where grid items cannot. CSS Grid items are on a track and can’t animate their spans.
On the other hand, Flex-grid doesn’t have a flex-gap like grid-gap, and so all the items use actual margins for spacing the items. The margins on the edge of the grid are offset by adding a negative margin to the flex-grid element. For this negative margin to take effect, your grid must be inside a container class.
All flex-grid items also have a margin-bottom, even the last row. There is currently no way to remove the last rows margin bottom so there will be extra space below your flex-grids.
Flexbox also doesn’t have the ability to set areas to elements like grid-areas. However this is not used with the grid that comes with ignition, so that might not matter here.
The point is to use the right grid for the right situation. Choose the grid that works for you, or use both.
Flex
Besides grids, there are times where you just want to flex some items on ONE row. This means the items wont wrap onto another line, and they wont have any margin bottom. This is great for one row of items.