Codepen.io is a popular website where developers make their own “sandbox” to play in and try new programming code. Developers post some interesting and very helpful ideas there. Web developers have new ways to layout web pages which are very flexible. In fact, one of the layouts is called flex box. Its been eclipsed somewhat by CSS Grids which have more features.
I’ve read many articles discussing the use of CSS Grids to divide a site into header, body, side bar and footer. Most sites have way more sections than that. I wanted to create a template that I could use over and over again. I started playing around and came up with a reusable, responsive grid layout that I posted on CodePen. It isn’t easy coming up with a new idea for codepen so I was thrilled when my pen was picked (featured) today.
Use the link below if you want to checkout the code if that interests you. But I’ve actually added the code to the bottom of this page so you can check out the way it works right here. Change the width of the screen you’re reading this on. You’ll see how the boxes resize themselves until they stack on top of each other on mobile phones.