Day 3 of #100DaysOfCode css Holy-grail-layout

day 3 of 100 days of code

Today was the third day for me of the challenge, luckily it's Sunday and i don't have much chores to do, so I decided to invest most of the free time i'm able to provide for the challenge, the last challenge was to replicate a google-clone layout using only flex and its properties, the next challenge was to use flex to style up a holy grail layout, for those of you who don't know what this is, simply put The holy grail is a web page layout which has multiple, equal height columns that are defined with CSS the various ways it could be implemented had some drawbacks over the years, but since the exercises focus on flexbox, it was obligatory to obtain the results using only flex, the layout usually looks a little something like this :

However the expected output of the layout exercise looks something like this:

now it's relatively easy to define a layout like this using CSS, but as someone who hasn't practiced his front-end skills often and not so much with flexbox either, it took me almost all day to figure out how to exactly style this layout, i even went on to ask for help on top's discord server, thankfully the community is full of people who'd like to help, that is if you provide good context for your problem and not just straightforwardly ask for a question, the previous top's lessons made sure to clarify that, if you'd like to read more on how to ask effective questions related to programming or coding in general the following article from FCC(FreeCodeCamp) provides some good insights on how to do so, having said all that after some hints from the loving community, i figured out how to wrap the cards in the layout as the problem that kept me from reaching my goal, was simply due to me being unaware that the cards did not have any fixed height or width defined to them, which ended up causing a big problem for me as the cards did not wrap even after setting flex-wrap to wrap on their parent container.

i will keep this article short and simple, so to wrap it up here's what i did throughout the day:

• woke up at 9 am started working on the flex layout
• made breakfast at 11 am and took a break from code
• did some laundry made coffee and then went back to dig in
• took a break from coding and went back to watch some of CS50 introduction to computer science videos
• finally solved the problem and matched the expected outcome from the exercise.
• played some more with flexbox zombies which is a mini game that teaches you how to use flexbox

so that wraps up how my day went as you can see this article isn't as long as the previous ones, but i'm staying committed to posting about every day of this challenge, thank you for reading or glimpsing through some article, and as always Happy Coding!