Flex Grid without Extra HTML markup

CSS Tips

Flex is a CSS property that allows developers to more easily layout and align content. Flex has been a long time coming and something that has been sorely missing from the developers arsenal for a long time. But finally it is supported widely enough to be deployed and utilized as an essential part of development projects.

One a project I have been working on I recently encountered a problem which had been brought to my attention previously. The problem was that when you made a grid layout, the rows must be complete otherwise you end up with the last item being aligned to the right, leaving a gap in the middle.

See the Pen 79ffbb458a334a29c4c18c9ecd1c700d by Matthew Horne (@horne3754sg) on CodePen.0

The solution that I have seen so far involves adding some extra “Ghost Markup” to the HTML to trick the browser.

See the Pen 4e6c20bc21171153dec90ae29555a1f5 by Matthew Horne (@horne3754sg) on CodePen.0

After playing around with this I found a solution that works and doesn’t require any extra markup.

See the Pen Flex Grid Without Ghost Markup (correct method) by Matthew Horne (@horne3754sg) on CodePen.0

The solution here was not to use justify-content: space-between; on the parent element.

For a more complete example of a Flex Grid layout check out Responsive Flex Grid without Extra Markup.

For more information on Flex check out Chris Coyier’s complete guide to Flex.

Matthew Horne

Matthew is a web developer from the United Kingdom who taught himself PHP and JavaScript and never looked back. If you would like to hire me, shoot me an email.