Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS The Solution

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Posted by Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
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
Liam Clarke
19,938 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
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Binu David
Front End Web Development Techdegree Student 11,990 Points
Binu David
.a{fill-rule:evenodd;}techdegree
Binu David
Front End Web Development Techdegree Student 11,990 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?