Re: grid-gap as repeating pattern

I would prefer the number of values be >= to the number of rows/columns -
1. This way it would be immediately clear what it does, where the current
proposal of using repeat isn't clear. Naturally, this can use `repeat()` in
the same way row/column definitions can.

I say >= rather than equal, as it would allow for greater flexibility in
the regeneration of a grid (i.e. not having to redefine the gap later on).

Jacob H. Pratt

On Fri, Jul 28, 2017 at 5:40 PM, Sebastian Malton <sebastian@malton.name>
wrote:

> Just to give another example (and to keep this conversation going). Here
> is something that I wrote as a hack work around.
>
> ```css
> .named-grid {
>     display: grid;
>     grid-template-columns: 100px 1fr 5px 100px 2fr;
> }
>
> .c1 {
>     grid-column: 1/2;
> }
> .c2 {
>     grid-column: 2/3;
> }
> .c4 {
>     grid-column: 4/5;
> }
> .c5 {
>     grid-column: 5/6;
> }
> ```
> I did this a couple more times because I had more columns but this
> displays my point.
>
> This (when the child objects are classed corrected) haves a gap of 0px
> then 5px as a repeating pattern.
>
> What I am proposing instead in the following
>
> ```css
> .named-grid {
>     display: grid;
>     grid-template-columns: 100px 1fr 100px 2fr;
>     grid-column-gap: 0px 5px;
> }
> ```
>
> Sebastian
>
> *From:* praveenpuglia@gmail.com
> *Sent:* July 27, 2017 10:25 PM
> *To:* sebastian@malton.name
> *Cc:* www-style@w3.org
> *Subject:* Re: grid-gap as repeating pattern
>
> I was thinking of something along the lines(not exactly a pattern to
> repeat) because I couldn't find a way to do variable grid gaps.
>
> Use case - having different gap between cells at different rows.
>
> Example - Building a macbook pro keyboard layout with CSS. The top
> function keys row has narrower grid gap than the other keys beneath it.
>
> I'll be able to reply with much more detailed explanatiom when I am on a
> laptop.
>
> On 28-Jul-2017 4:56 AM, "Sebastian Malton" <sebastian@malton.name> wrote:
>
>> It would be amazing if the following was possible with the
>> grid-column-gap and grid-row-gap.
>>
>> grid-row-gap: 0px 5px;
>>
>> This means that the gap on row boundary 2,4,6... is 0px and on the row
>> boundary 3,5,7... is 5px.
>>
>> This can be scaled up as many values as wanted. The reason that boundary
>> 1 is skipped is because it is not an inner boundary.
>>
>