Re: [css-grid] feedback

Hi Michael,

just a suggestion, next time try to use a more specific subject for your
mails :-)

On 14/05/15 03:30, Michael wrote:
> 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

You can use repeat() syntax (maybe you already know it):
  grid-template-columns: repeat(4, 172px 1.5em);

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

Regarding gutters, if I'm not wrong they will be probably added in a
future version of the spec re-using column-gap and adding a new row-gap
property.

So you would have:
  grid-template-columns: repeat(4, 172px);
  column-gap: 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?

Yeah, If you want that the browser calculates the width, you might want
to try "1fr", so something like:
  grid-template-columns: repeat(4, 1fr 1.5em);

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

This would be solved with the column|row-gap properties.

Bye,
  Rego

Received on Wednesday, 3 June 2015 11:28:11 UTC