My pen was picked!

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.

https://codepen.io/jfksdca/pen/wZaQbx/

Header
1180
Content
1180
left-half
565
right-half
565
one-fourth
257
one-fourth
257
one-fourth
257
one-fourth
257
left-third
360
middle-third
360
right-third
360
right-two-thirds
770
left-two-thirds
770
Scroll to Top