[css-grid][css-box] width, height and snapping

Disclaimer: This proposal comes directly from the “rethinking css grids” blog post of Mark Boulton [1] and some of my own design work. You don’t have to read his article before continuing this mail but planning it for later may be a good idea anyway.

ISSUE:
=============================
The issue I want to solve in this mail is the current impossibility to force an element’s size to ‘snap’ at certain sizes.



USE CASE:
=============================
My first use case will be a note application. The note application is built using a grid featuring a [[ minmax(80px*80px, 160px*160px, 1*1) ]] module size with a grid line width or 33% of the module width. On a 800x600 (1x) screen, it features 6 columns of width (93px*93px) as well as a 31px grid line width.

The notes themselves must fit in 1x1, 2x2 or 4x2 field, depending only on their content (i.e. the size must be the smallest one which fully contains the note).

  

I suppose that each note is an <ARTICLE> tag whose ‘class’ is equal to “note”. Here’s the markup I have in mind :

    <div id=”note-container”>
        <article class=”note” id=”note-20120503-173521-001”>
            ...
        </article>
        [...]
    </div>

My goal is to use an automatically filled grid to store the tiles. A fully CSS solution to this problem is not possible at this time.



PROPOSED SOLUTION:
=============================
My proposed solution includes (1) a more flexible ‘grid-definition’ property (2) an ‘auto’ value for ‘grid-row-span’ and ‘grid-column-span’ (which makes an element span across as much as row/columns as is min-content requires) and (3) a new ‘grid-span-snap’ property (which restricts the possible span combinations in case of an auto.

    #note-container {
        display: grid;
        grid-definition: minmax(
            80px 80px, 
            160px 160px, 
            /*optional aspect-ratio:*/ 1
        );
        grid-line-width: 33%;
    }
    
    #note-container > .note {
        grid-span: /*row:*/ auto /*columns:*/ auto;
        grid-span-snap: 1 1, 2 2, 4 2, 
          /*or-else-behavior: grow-any-size or */ use-last-and-overflow;
    }



OUTSIDE CSS GRIDS:
=============================
I also propose to add a ‘width-snap’ and ‘height-snap’ to [css-box] in order to force an element’s width/height to grow by multiple of a specified value (interesting if you want an integer number of items to show up in a custom select list and never an half item), and for other purposes.

Proposed syntax: “width-snap: <length> <length>?” (if one value is specified, the size of the element must snap to a value which is a multiple of specified value; if two values are specified, the size of the element must snap to a value equals to the first specified value plus a positive multiple of the second one).



As this seems fairly complex to spec, I propose to delay that to CSS Grid L2. However, if someone has any feedback on the proposal, he’s welcome ;-)

Best regards,
François

_____________________________________________
[1] http://www.markboulton.co.uk/journal/comments/rethinking-css-grids