Help needed- Test your skills: Grid Layout

Hi Guys,

I hope you’re well.

I’m working through the Grid Layout assessment ( and I’m stuck. As you can see from the pictures attached, I am struggling to organise the tags the same way they are organised in the example. The example fits more on each line before it wraps.

I was hoping someone would be able to take a look at my code (link to code pen below) and make some suggestions as to how I might be able to solve this problem. I’ve tried specifying a margin on the tags (the li elements), as well as using the “flex-basis” property and giving it a value of 33.333% but didn’t get the intended result.

Any help would be appreciated! Thanks in advance.


Example My work



justify-content should be center, flex-direction is not needed as it defaults to row, align-items has no effect, hence need to be removed

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

your .container rule looks great.

By the way, some Test your skills exercises have answers by the author on Github. Check this lesson answer

This will possibly happen because the iframe that MDN embeds in the article is not large enough to look exactly like the