Today I was messing around with a CSS grid layout and found myself having to add
column-gap and immediately thought to myself that grid seemingly has a shorthand property for everything and I discovered there is the gap property!
Basically, you either give it a one or two values and it sets either the
- The same value if you provide a single value (i.e.
row-gapwill get the first value and
column-gapwill get the second value if you provide two values (i.e.
Because some of the shorthand properties for CSS grid can be a bit tricky to remember which property is set based on the position of the value in the list, I think I’ll probably just use this one for when I want to set both the
column-gap to the same value, otherwise I’ll explicitly set both if they are different values.
I’ve created a short codepen to show this in action.