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.

No comments yet. Be the first.

Leave a Comment