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
.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

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;

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!

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?