CSS Flex Grid Help

HTML-CSS
1

Looking for some help with the below CodePen. I have 9 items I need to display and I would ideally like them to be in a 3x3 grid, going down to 2 then 1 if resized. The now before any input they are all on the one row then once text is entered and put back onto the site 3 of them move down and form another row.

2

Do you really need to use flexbox? CSS grid would be perfect for that. There is a free 15min interactive course on CSS grid. It really helped me with organizing my webpages. Although it is getting more and more support on all browsers, some of them (IE mainly) don’t support grid. I guess you could use bootstrap too, although I am not that familiar with it.

3

Here ya go:
I have a very to-the-point personal “wiki” for CSS that I made. You can accomplish this with either Flexbox or Grid.

4

Also, one note: It’s “Jupiter.” If it’s for a job interview…

5

You need to set the Flex child elements that exact behaviour you looking for.

In this case

.planet {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 29%;
}

To understand those code better I would refer you to: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Improvement I’d make:
flex-basis is set to 29% because of all elements using box-sizing: content-box which is the default for many browsers and you have padding around planet element. I would add box-sizing: border-box so that padding applying whitespace inside the box, instead of going out. Here is another read about this: https://www.abeautifulsite.net/box-sizing-border-box-explained

Once you have set box-sizing to border-box.

*, *:before, *after {
  box-sizing: border-box;
}

.planet {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 33%;
}

Notice flex-basis: 33% meaning you are dividing the planet element to only take 33% of the parent element (.planet) width. This makes a lot more sense compare to 29%.

If you want to take time to learn Flexbox, I find Wesbos video tutorial helps a lot. https://flexbox.io/

And,
You misspell Jupitor. It should be Jupiter and unfortunately Pluto is not considered a planet any longer :joy:

Great project! Now I know I’m turning 15 very soon on Mars time, teenager once more!!