Keeping grid items looking uniform is always a challenge if you are looking for a consistent appearance. Here is one simple but very useful solution.

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.


Flex method

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. 

  • The main wrapper is set as "Flexbox" and the direction as Column
  • The header and body are left alone, they will resize based on the inner content.
  • The footer however is also set as a flexbox but thanks to flex-grow: 1; will expand to fill any voids.
  • The button within the footer is then set with a margin-top as auto, this will ensure the button sits at the bottom of the div.

Post comment