CODEWITHSUNDEEP
htmlcssflexboxcss-grid
Ricola
Ricola

Reputation: 2932

What does row-gap (and column-gap) do in neither Flex not Grid Layout?

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 class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>

And as expected, this does nothing.

Upvotes: 1

Views: 233

Answers (1)

John Li
John Li

Reputation: 7447

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 class="container">
  <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>

Upvotes: 4

Related Questions