6

Why does the css grid-column property take multiple values like this:

grid-column: <column-start> / <column-end>;

Normally a property with multiple values (e.g. border-radius) would have them separated by spaces. Here they are separated by a slash. Why is this?

3
  • Actually border radius is split by slashes on occasions.
    – Paulie_D
    Commented Mar 12, 2018 at 12:17
  • 3
    Probably because the values themselves can have spaces, like span 2. In this case the full property would be grid-column: 1 / span 2;. Commented Mar 12, 2018 at 12:25
  • I would suggest it's because it's defining two properties not one property with multiple values.
    – Paulie_D
    Commented Mar 12, 2018 at 12:28

1 Answer 1

7

This is also the case for properties like font. As in:

font: 12px/18px; 

which is a shorthand property for font-size and line-height properties.

The background shorthand property does the same:

background: no-repeat center / 80% url("../img/image.png");

In the case of background, to define the background-size you must define the background-position, followed by a /, and then the background-size value.

grid-columns is a shorthand property for grid-column-start and grid-column-end properties. And both these values can contain one or more spaces. Like span 2, or 5 somegridarea span if using a custom identifier.

IMO, the / makes it more readable, and less prone to error. It also eliminates ambiguity with values that contain spaces.

For example:

grid-column: 1 / span 2;

or

grid-column: span 3 / 7;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.