css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

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


  1. 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.

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

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

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

  5. 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.

  6. 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.

  7. @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.

  8. Nice work thanks for sharing

  9. nice but no X button, any idea?

  10. 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...

  11. 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 .....

  12. 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!

  13. 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.