[css-grid] Possible reconsideration of CSS terminology in terms of design?

[IainIsCreative]

Hello, hello hello.

I want to raise an issue on terminologies used within the CSS Grid Syntax, especially the use of 'gap'.

I'm a big believer in making consistent wording and language, and I think with CSS Grid the terms between CSS and design must remain consistent otherwise it creates a confusion between what is a gap and a gutter, for example.

An example of gap:

.element {
    grid-gap: 20px 10px; /* Shorthand */
}

/* Same thing, just in separate properties */
.element {
    grid-column-gap: 20px;
    grid-row-gap: 10px;
}

I think 'gap' should be changed to 'gutter'. In the case of designers and developers in a discussion, the use of 'gap' may cause confusion and gutter should be used instead.

Proposal

Changing 'gap' to 'gutter'. This may also be used on rows as a space between rows is still a gutter, just on a different axis.

/**
 * Same code as before, but with `gutter` instead.
 */

.element {
    grid-gutter: 20px 10px; /* Shorthand */
}

/* Same thing, just in separate properties */
.element {
    grid-column-gutter: 20px;
    grid-row-gutter: 10px;
}

Any more terms?

I'm relatively new to the CSS Grid, but if anyone believes more terms and use of them are a concern, please let me know.

@iainspad

[SebastianZ]

CSS Multi-column Layout also uses the term 'gap' and that spec. is already widely implemented. Also, 'gap' is easier understandable than 'gutter'. Last but not least, it is shorter than 'gutter'.

So, while it may technically not be 100% correct, I think 'gap' should be kept for simplicity and consistency with other CSS modules, but I don't have a strong feeling about that.

Sebastian

[svillar]

The main reason to chose gap was precisely to be consistent with multi column which has been using it for some time now.

[IainIsCreative]

As while the case may be 'simpler' due to consistency and being a short word, I don't see that as an outstanding reason (good reason, but not great) to ignore design terminologies and implement them for future use especially in something so design-heavy as the CSS grid syntax. Again, this goes back to consistency between design and development.

Hypothetical Scenario (and this does happen already, I've experienced something along these lines):

• Designer uses certain terminologies to explain design
• Developer becomes confused as they've heard some of the terms before but not all of them
• Developer and Designer eventually get frustrated over two terms that mean the same thing but they don't know what they mean as they never heard that term the other knows
• This may lead to bickering over the use of words and need to find the right term to call it
• Time and effort is then wasted over confusion when it could have been prevented.

That's just one scenario but this happens when two words mean the same thing but can be very confusing for a lot of people, whether it's due to education, discipline etc. and this is why I want the appropriate properties and values to use design terms to make it a more understandable, easier flow for designers and developers instead of different words for the same thing.

This is also make CSS Grid accessible and easier to learn from a designer's point of view as it will make the use of it easier to understand and how to apply CSS Grid to their designs.

Note: It's also worth noting, confusion over terms can last a long time for some people.

[fantasai]

This was already decided based on the logic in SebastianZ's comment.

Also, consistency within CSS trumps consistency with any particular outside vocabulary, particularly as those tend to vary among different communities around the world and are subject to change.

[IainIsCreative]

Also, consistency within CSS trumps consistency with any particular outside vocabulary, particularly as those tend to vary among different communities around the world and are subject to change.

Except Design Terminologies such as column, row, and gutter have been around for decades and that is not going to change any time soon.