Grow your CSS skills. Land your dream job.

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 http://www.techdigest.tv/windows-8-metro-apps1.jpg

    I have this going so far however http://codepen.io/seraphzz/pen/cFoDs

    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

    hello,

    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 : http://dabblet.com/gist/5719850 or http://codepen.io/gcyrillus/full/cvqJa

    # 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! http://www.responsivegridsystem.com/

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

    # June 6, 2013 at 3:15 pm

    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.

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