Blocking-In Method for Layouts with CSS Grid and Flexbox

Note: I like to organize concepts so I can learn the simple hierarchy of concepts and how they are related. Here are my concept outlines for CSS grid and flexbox.

In the old days, I learned about CSS properties and values from my small tight, knit blogging community. We'd view each other's sources and learned from a lot of trial and error. With the plethora of online resources, there is no shortage of tutorials and documentation to guide us in web development.

I recall trying to learn CSS grid and flexbox on my own by trying to read the entire MDN CSS Grid, which turned out to be a bad idea. (Note: MDN is a great reference for all things web development, though!)

I learned the concepts, but didn't quite grasp how CSS grid and flexbox worked until I took a free course and experimented along with the videos. Even with the free course, I needed to apply what I knew unless I forget.

I worked on a Frontendmentor.io challenge and tested my CSS grid and flexbox knowledge. Specifically, I worked on the "Fylo beta sign up landing page."

After two weeks, I realized that my biggest mistake was putting all the content and images in the file while I worked out the responsive aspect of the website. The website became too busy.

I decided to strip away all the noise (images and content) to focus on the website layout in its simplest form.

I used the blocking-in method, an art method, and applied it to CSS grid and flexbox to the website.

Blocking-in is an art method where you draw the figures and shapes before filling in all the details. I learned about blocking-in ages ago when I wanted to improve my art doodles.

This method helped me tremendously, and I was able to quickly complete the challenge with a more responsive layout with grid and flexbox within two days.

There are some breakthroughs we need to celebrate, and, for me, this is one of them. Sometimes when we work on a project, we forget that we have other skillsets and knowledge to make the project more manageable.

Problem solving is about using the current tools and knowledge you have to solve the problem. Along the way, you learn new problem solving techniques and about yourself!

See below for my blocked-in layout with CSS grid for the project challenge. Nothing fancy here other than the colors and borders to differentiate the grid areas. It's helpful to use blocking-in and troubleshoot grid with Firefox Developer Edition.