While researching browser compatibility for the gap property, I came across this informative page: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap.
The page includes examples for both Flex and Grid Layouts, leading me to assume it would only work in one of these layouts.
However, what caught my attention was the compatibility matrix, which has three rows:
row-gap(Chrome 47)- Supported in Flex Layout (Chrome 84)
- Supported in Grid Layout (Chrome 66)
If Chrome version is below 66, and the support began at Chrome 66, then what features are available in Chrome versions between 47 and 66?
Curious to see how it behaves, I attempted to use it in Flow Layout:
.parent{
row-gap: 20px;
}
.child {
height: 100px;
background-color: red;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>Not surprisingly, this had no effect on the layout.