Re: [css-grid] feedback

[I'm not sure why you posted this as a response to a css-lists thread.
Can you repost it as a new thread?  I won't respond to this here.]

On Wed, May 13, 2015 at 6:30 PM, Michael <michael@boost.co.nz> wrote:
> I have a recommendation for the CSS Grid Module.
>
> I have been experimenting with the CSS Grid Layout in my codepen:
> http://codepen.io/trilm/pen/RPaWQL?editors=110
>
> There are certainly things I still need to totally understand, which I will
> continue to look into. No doubt I will contradict myself eventually.
>
>
> ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
>
>
> Grid Template Column:
>
> Instead of using repetition to define our grid:
>
> // Existing way to define a 4 column grid
> grid-template-columns: 172px 1.5em 172px 1.5em 172px 1.5em 172px
>
> Could we define our grid like this:
>
> // Possible have another option to define an equal width 4 column grid in
> shorthand
> grid-template-columns: columnTotal / widthValue / gutterValue;
> grid-template-columns:          4         /       23.2%     /     1.5em
> ;
>
> Better yet, so the user doesn’t have to do math:
>
> grid-template-columns: columnTotal / browserCalculatesColumnWidth /
> gutterValue;
> grid-template-columns:          4         / browserCalculatesColumnWidth /
> 1.5em;
>
> Note: I have discovered 1fr value, doesn’t seem to work how I expect. Maybe
> this will help for auto calculation? I just think it may be a bit too
> technical?
>
>
> ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
>
>
> Grid Column:
>
> Note: I think of the following as another step in the shorthand option.
>
> Once the columnTotal is defined from above ( Eg. 4 ), the user will use the
> values below to match up on their grid items:
>
> .item:nth-of-type(1) { grid-column: 1; }   = grid-column: 1 / 2;
> .item:nth-of-type(2) { grid-column: 2; }   = grid-column: 3 / 4;
> .item:nth-of-type(3) { grid-column: 3; }   = grid-column: 5 / 6;
> .item:nth-of-type(4) { grid-column: 4; }   = grid-column: 7 / 8;
>
>
> If the user wants to target a gutter, they will specify it like this.
> Not sure why someone would want to target a gutter specifically.
>
> .item:nth-of-type(1) { grid-column: 1; }   = grid-column: 1 / 2;
> .item:nth-of-type(2) { grid-gutter: 1; }     = grid-column: 2 / 3;
> .item:nth-of-type(3) { grid-column: 2; }   = grid-column: 3 / 4;
> .item:nth-of-type(4) { grid-gutter: 2; }     = grid-column: 4 / 5;
> .item:nth-of-type(5) { grid-column: 3; }   = grid-column: 5 / 6;
> .item:nth-of-type(6) { grid-gutter: 3; }     = grid-column: 6 / 7;
> .item:nth-of-type(7) { grid-column: 4; }   = grid-column: 7 / 8;
>
>
> If the user wants to span across 2 columns, they would revert to the
> grid-column: 5 / 8 for example.
>
>
> --------------------------------------------------------------------------------------------------------------------------------------------------------
>
>
> // First Column
>   grid-column: 1 / 2 = grid-column: 1;
>
> // First Gutter
>   grid-column: 2 / 3 = grid-gutter: 1;
>
> // Second Column
>   grid-column: 3 / 4 = grid-column: 2;
>
> // First Gutter
>   grid-column: 4 / 5 = grid-gutter: 2;
>
> // Third Column
>   grid-column: 5 / 6 = grid-column: 3;
>
> // First Gutter
>   grid-column: 6 / 7 = grid-gutter: 3;
>
> // Forth Column
>   grid-column: 7 / 8 = grid-column: 4;
>
> // First Gutter
>   grid-column: 8 / 9 = grid-gutter: 4;
>
> // Fifth Column
>   grid-column: 9 / 10 = grid-column: 5;
>
> // First Gutter
>   grid-column: 10 / 11 = grid-gutter: 5;
>
> // Sixth Column
>   grid-column: 11 / 12 = grid-column: 6;
>
> // First Gutter
>   grid-column: 12 / 13 = grid-gutter: 6;
>
> // Seventh Column
>   grid-column: 13 / 14 = grid-column: 7;
>
> // First Gutter
>   grid-column: 14 / 15 = grid-gutter: 7;
>
> // Eighth Column
>   grid-column: 15 / 16 = grid-column: 8;
>
> // First Gutter
>   grid-column: 16 / 17 = grid-gutter: 8;
>
> // Ninth Column
>   grid-column: 17 / 18 = grid-column: 9;
>
> // First Gutter
>   grid-column: 18 / 19 = grid-gutter: 9;
>
> // Tenth Column
>   grid-column: 19 / 20 = grid-column: 10;
>
> // First Gutter
>   grid-column: 20 / 21 = grid-gutter: 10;
>
> // Eleventh Column
>   grid-column: 21 / 22 = grid-column: 11;
>
> // First Gutter
>   grid-column: 22 / 23 = grid-gutter: 11;
>
> // Twelth Column
>   grid-column: 23 / 24 = grid-column: 12;
>
>
> ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
>
>
> Hopefully this helps in someway,
>
> Mike.
>
>

Received on Tuesday, 2 June 2015 15:55:21 UTC