rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
328 stars 12 forks source link

Is it possible to set `grid-column-gap` or `grid-row-gap` using the `grid` shorthand? #31

Closed ror-y closed 7 years ago

ror-y commented 7 years ago

From the documentation:

The grid property is a shorthand that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), and the gutter properties (grid-column-gap and grid-row-gap) in a single declaration.

It doesn't look like you can actually change grid-column-gap or grid-row-gap using the grid shorthand, rather that using the rule simply initiliases each value back to initial.

Is this the case or have you found it's possible to set a gap using the grid shorthand?

rachelandrew commented 7 years ago

There is a note in the specification just below that section explaining that you cannot set the gap properties with the shorthand,

"Note: Note that you can only specify the explicit or the implicit grid properties in a single grid declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are reset by this shorthand, even though they can’t be set by it."

The specification is what browsers implement, so if something is not in the spec then there isn't another way to do it.