Grow your CSS skills. Land your dream job.

Flexible Tile Layout

  • # August 30, 2012 at 8:06 pm

    I am creating a template for a blog and in this template I am going to be laying out the posts in a windows 8-esk fashion.

    Example: http://s10.postimage.org/6qd18bou1/Metro_Tile_Navigation_Test_Correct.png

    Now the problem I am running into is trying to figure out how to make it work the way i want it to.

    The way I want it to work is all post except posts with images will be displayed in a 1×1 tile and posts with images will be displayed in a 2×2 tile.(1×1 tile is = to 243px X 243px). When you click on a 1×1 tile it will then turn into a 1×2 tile and display an excerpt of the post which would cause the rest of the tiles adapt. Also the initial layout the tiles have to be dynamic since there will be no certain order of the sizes of tiles they will be displayed newest to oldest.

    Can anyone help or point me in the right direction? This will be something I could put on CodePen after I get it working correctly.

    # September 7, 2012 at 12:10 pm

    Take a look at Naomi Atkinson’s site that uses Masonry.js.

    # September 7, 2012 at 12:11 pm

    Perhaps you might like to get started in Codepen?

    You might want to look into masonry.js

    Oh…snap

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".