Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,888 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,888 Points
Liam Clarke
Liam Clarke
19,888 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,978 Points
Binu David
.a{fill-rule:evenodd;}techdegree
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?