Re: Proposition. Positioning content with guidelines

Great sample. However, I can come up with a solution :

<table id="grid">

    <!-- headers -->
    <tr>
        <td class="header name">...
        <td class="header oldPrice">...
        <td class="header reduction">...
        <td class="header newPrice">...
    </tr>

    <!-- lines -->
    <tr>
        <td class="content name">...
        <td class="content oldPrice">...
        <td class="content reduction">...
        <td class="content newPrice">...
    </tr>

    <tr>
        <td class="content name">...
        <td class="content oldPrice">...
        <td class="content reduction">...
        <td class="content newPrice">...
    </tr>

    ...

</table>

/* global formatting (colors, ...)
#grid { display: grid; grid-flow: rows; ... }
#grid tr { display: grid; }
tr.header { color: ...; background: ...; ... }
tr.content { ... ; }
tr.content.newPrice { color: darkred; ... }
...

/* first row mode */
@media (big-screen) {

   #grid > tr {
        grid-columns: 0.8fr 0.1 fr 0.1fr;
        grid-rows: 2; grid-align: stretch;
        /* some elements also need borders, text-align, ... */
    }

    #grid > tr > div { grid-row: 1; grid-row-span: 2; grid-column: auto; }
    #grid > tr > div.reduction { grid-row-span: 1; grid-row: 1; }
    #grid > tr > div.newPrice { grid-row-span: 1; grid-row: 2; }

}

/* second row mode */
@media (small-screen) {

   #grid > tr {
        grid-columns: 0.9fr 0.1fr;
        grid-rows: 3; grid-align: stretch;
        /* some elements also need borders, text-align, ... */
    }

    #grid > tr > div { grid-row: 1; grid-row-span: 3; grid-column: auto; }
    #grid > tr > div.oldPrice { grid-row-span: 1; grid-row: 1; }
    #grid > tr > div.reduction { grid-row-span: 1; grid-row: 2 }
    #grid > tr > div.newPrice { grid-row-span: 1; grid-row: 3; }

}

In browsers that don't support grid, a normal table is shown which looks 
globally like the initial grid, if good formatting is applied.



-----Message d'origine----- 
From: Alexander Shpack
Sent: Friday, February 24, 2012 12:17 PM
To: François REMY
Cc: Tab Atkins Jr. ; www-style
Subject: Re: Proposition. Positioning content with guidelines

On Fri, Feb 24, 2012 at 12:28 AM, François REMY
<fremycompany_pub@yahoo.fr> wrote:

> If you have other cases you think we can't solve with grids, please send
> them, I think everyone is interested.
>

First one attached

Received on Friday, 24 February 2012 12:18:21 UTC