A grid is a great way to display information, presenting information in an easy to read format but sometimes you can come a cropper. If you grid contains text (titles and descriptions) you can end up with irregular sized boxes and it looks rather naff.
This gets more exaggerated if you have blocks of text, but no matter what your content, you can create a more balanced look. One of the best solutions is to have the gaps in the middle of the block, leaving the header and footer to always be inline.
Flexbox is a useful tool for developers and designers alike. Support is now commonplace and for this issue its very easy to solve this problem. Flex grow can ensure that all of the available space is occupied, which you can then use to line up elements. I always try to make the top and bottom of grid items line up, leaving any gaps in the middle. While you still have the same amount of empty space, it looks more uniform at a glance.
Please feel free to have a look at the JS Fiddle below and hopefully this will you create uniform and attractive designs.
This is the same method i use on all iterations of my blog, service and project grids, example and solution below.