user profile image

A resposive expanding column layout to present projects, articles, and more.


  1. Very slick!

  2. very cool!

  3. Great work :)

  4. awesome...

  5. Wow. This is perfect for something I'm working on. You don't even know. Thanks for being so generous with your work.

    Showing some love from New Orleans.

  6. @ShizzleTips That's great, thank you!

  7. this is great. makes it more upsetting that google devalues click to expand content.

  8. Hi @ettrics, I made a pen, inspired by yours: modal dialog with pure css3. You can see my pen here:

  9. @mel Nice job!

  10. i love this! i'm trying to make a pen that's based loosely on this. still trying to figure out how to make some sort of slider within one of the sections though.

  11. You could try changing the animation-delay on the text animation when a column is expanded to hide it before the column it resizes and smushes the text.

  12. @matze great suggestion

  13. @matze @ettrics I have a way to animate text in a very fluid, responsive way, which would be perfect for this. Check this out. Just click anywhere and start dragging around like crazy.


    It uses relative and additive animations. The browser is doing the layout as everything is positioned relative. I'm just animating the difference in change. The smoothness comes from stacking animations on top of each other and adding their property values together. This blends all the animations into a single animation.

  14. Nice work thanks for sharing

  15. Nice!

  16. Awesome!

  17. nice but no X button, any idea?

  18. Super sweet. I was wondering how to easily add this to wordpress sites. i know there's a shortcode for that but it displays the codepen controls. Obviously I can add the code to the three equivalent places but wouldn't it be great to just paste it all in one place? maybe i'm missing something...

  19. awesome work bro.. i m woring with 10 column nd hve some issue when i click on 6th and more(7, 8, 9, 10) columns it went to -100% but i tried to overcome but nothing seems working so plzz me out .....

  20. I love this, but I need an ADA compliant version. Do you happen to have an accessible version of the expanding column layout? It currently isn't keyboard accessible.

    Thanks so much!

  21. Hello, I changed the colors in the scss but it does not change anything when displaying my web page ??? and the button close has disappeared ... Do you know how to do it ?

    Thanks !

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.