I was reading this page to understand browser compatibility of the gap property: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap.

It provides an example for both Flex and Grid Layout, so you would expect it to work only in one of these layouts.

But what is confusing me is the compatibility matrix. I see it has three rows:

1. row-gap (Chrome 47)
2. Supported in Flex Layout (Chrome 84)
3. Supported in Grid Layout (Chrome 66)

If it only started to become supported in one of these layouts in Chrome 66, what is exactly supported in Chrome version v with 47 <= v < 66?

I've tried to use it in Flow Layout:

.parent{
  row-gap: 20px;
}

.child {
  height: 100px;
  background-color: red;
}

<div >
 <div ></div>
 <div ></div>
 <div ></div>
</div>

And as expected, this does nothing.

CodePudding user response：

It seems that gap does work in multi-column layout, so perhaps this would be where it worked before flex and grid containers.

.container {
  width: 600px;
  column-count: 3;
  gap: 100px;
}

<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>