Help needed- Test your skills: Grid Layout

MDN Learn
1

Hi Guys,

I hope you’re well.

I’m working through the Grid Layout assessment (Test your skills: Grid - Learn web development | MDN) 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.

Codepen

Example
Example507×403 138 KB
My work
My work463×491 141 KB

Regards,

Jared

2

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

3

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