[css-grid] feedback

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