Create a grid with flexbox

I know, why should you make a grid with flexbox if there is grid…?

Well, I´m trying to understand the underlying concept of flexbox, before I move on to grid.

The basic thought is to align the three children (upper, middle and lower boxes) of the box container vertically (hence flex direction: column at the box container), and again their children (box 1-8) in 3 rows (no flex-direction entered, as default value is row). I was hoping for a rectangle with 8 boxes, 3 in top and bottom row and 2 in the middle.

Is that even possible with gridbox? What am I missing? I tried to play around with justify-content and align-items, but I don´t get beyond a white screen… :tired_face:

https://codepen.io/FrancisCostello/pen/GRmOjdr?editors=1100

You don’t see anything because these containers have no height:

#upper-boxes
#middle-boxes
#lower-boxes

So if you say:

  #box-1 {
    height: 50%;
  }

… that’s 50% of zero.

When you get nothing but a white screen, it helps to give your elements a border of, say, red. That will be visible even if the height is 0 (in which case you’d only see a red line, but it’ll give you a hint what’s wrong).

1 Like

:man_facepalming: of course!

That was a big help, thanks a lot! :pray: With that hint I could finally figure out how parents and children are nested and react to each other!

Those lessons on fcc are good, but when it comes to the challenges, you´re suddenly in front of an empty page and most of those lessons are kinda gone… Finally starting to get a grip on the underlyinig coherencies though!

https://codepen.io/FrancisCostello/pen/GRmOjdr?editors=1100

Yeah it’s quite a leap from the challenges to completing the first project page, CSS takes a while to get familiar with. "border: 1px solid red " is your best friend in the beginning. The browser dev tools are even more powerful.

1 Like

Indeed that´s very useful! It´s good to know it´s hanging around there somewhere, dispite the the fact it doesn´t seem to be impressed by the commands that you are (obviously not) throwing at it… :smiley:

Thanks for the advice!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.