The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Metro like theme

  • # June 5, 2013 at 11:28 pm

    Hello, once again I am wondering how to tackle something. I am trying to go for a windows 8 metro interface like this

    I have this going so far however

    My problem is however that I can’t get equal spacing for each tile. So is it better to have absolute positioning, or floats? Any advice, insight, or suggestions would be greatly appreciated!

    # June 6, 2013 at 3:45 am

    This reply has been reported for inappropriate content.


    you could relay on colunm-width, and column-gap to help give a rythm.

    If boxes are inline-block, it won’t be to messy in IE.

    try here : or

    # June 6, 2013 at 2:43 pm

    That looks great! However, it doesn’t seem to work very well on my iPad.

    # June 6, 2013 at 2:54 pm

    You can do this pretty easily with Masonry/Isotope if you want a cross-browser solution and don’t mind JQuery.

    # June 6, 2013 at 3:11 pm

    Thanks! I checked that out and it looks pretty promising. However, I found the css version of the solution with this!

    I feel that this will be the most simple method without jquery or tons of code.

    # June 6, 2013 at 3:15 pm

    This reply has been reported for inappropriate content.

    great you solved it.
    For the little example i put on line, you should adapt size and font-size to screen size (and maybe do html padding with em instead),
    it can indeed have holes , vertical rythm don’t get destroy tho. :)
    this one goes just with 3 class.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed