Grow your CSS skills. Land your dream job.

responsive “table” matrix

  • # January 6, 2013 at 7:30 am

    Hi CSS Tricks Forum,

    Anybody able to wrap his mind around this one?

    What I am trying to achieve in the webdesign of a single page is a “matrix” of several fields in a grid with three side-by-side fields of the same height. Each field has a background-color, and some text content. The line-height should adjust to the space needed by the content = the one field with the longest content defines the height of the “table-row” so to speak. Can you get that working with divs?

    The only “solution” I found was defining a fixed height of the divs in px, which of course does not at all adjust to the content within the fields.

    From my knowledge the only way to achieve something like that is the use of tables and width defined in percentage. If so, is there a CSS trick to float / clear the td in a way that beneath a certain breakpoint (@media) it collapses to a single-column table with the td stacked upon each other? Meaning something like

    1 2 3
    4 5 6
    7 8 9

    becomes

    1
    2
    3
    4
    5

    By the way, I am currently developing the website with the ZURB Foundation framework (*WHICH IS AWESOME*), but it seems it can’t really handle this with onboard div-classes. Wouldn’t mind to go off Foundation standards with this single page, yet I don’t know whether this would be possible in CSS.

    Thanks for any help in advance, Tom

    # January 6, 2013 at 10:04 am

    Would this work for you ([demo](http://jsfiddle.net/Mottie/wps2H/1/))?

    div {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    div:nth-child(3n+1) {
    clear: both;
    }

    @media all and (max-width: 500px) {
    div {
    float: none;
    }
    }

    if you need to equalize the height of each block, then check out this [adaptive demo](http://css-tricks.github.com/Equalizer/adaptive.html) I just made for the Equalizer plugin.

    # January 6, 2013 at 3:03 pm

    Thanks @Mottie, this is great!!! Your demo AND the link provided – cheers for that. For the moment I will stick with the rather simple css-table technique, switching from

    display: table;

    to

    display: block;

    at a certain breakpoint for mobile devices – imitating Foundation’s intention. I am OK with that, since I will leave IE7 behind anyway. But if there’s more time I will definitely revisit your solution with the Equalizer plugin. Thanks again – the power of the web community!

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