CSS The Solution

Jamie Reardon
Jamie Reardon
Treehouse Project Reviewer
Posted by Jamie Reardon
Jamie Reardon
Treehouse Project Reviewer

Grid Gap Properties obsolete?

I use VSCode and as I was following along with the practice, I noticed that my editor gave me a tooltip about the following properties being obsolete and I should avoid using them:

  • grid-row-gap
  • grid-column-gap
  • grid-gap

It also mentioned that I should now be using the gap property to define these gaps.

3 Answers

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 19,724 Points
Liam Clarke
Liam Clarke
Treehouse Moderator 19,724 Points

Personally, I would use both.

First with the deprecated property and second with the new property. That way you are supporting all browsers and preparing for future known breaking changes.

#grid {
  ...
  grid-row-gap: 20px;
  row-gap: 20px;
}
Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 19,724 Points
Liam Clarke
Liam Clarke
Treehouse Moderator 19,724 Points

Hi Jamie

That is correct, these prefixed properties are being replaced, you should use the new name when using these.

As you can see, its the same name without the prefix of 'grid'

Hope this helps!

Binu David
Binu David
Front End Web Development Techdegree Student 11,978 Points
Binu David
Binu David
Front End Web Development Techdegree Student 11,978 Points

MDN shares this note regarding the items mentioned:

"CSS Grid Layout initially defined the grid-row-gap property. This prefixed property is being replaced by row-gap. However, in order to support browsers that implemented grid-row-gap and not row-gap for grid, you will need to use the prefixed property as in the interactive example above."

Does this imply we need to use both? or just the older version until the browsers catch up?