fix(css): elaborate how gap percentage values behave

[OnkarRuikar]

• fixes Interpretation of percentage values in grid-gap #24933

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/gap

External URLs (1)

URL: /en-US/docs/Web/CSS/gap
Title: gap

• https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/open_the_inspector/index.html (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-07-04 04:09:53)

[OnkarRuikar]

Let's make dimensions 24px to make flex and grid look same.

[bsmth]

It feels a little wonky to use 24px here instead of 20px as with the others. What do you think about this:

https://codepen.io/bsmth/pen/mdYNyJb

i.e.:

body > div {
  background-color: #ccc;
  width: 200px;
  height: 200px;
  flex-flow: column;
}

#grid {
  display: inline-grid;
  gap: 12.5%;
}

#flex {
  display: inline-flex;
  gap: 12.5%;
}

#grid > div,
#flex > div {
  background-color: coral;
  width: 20px;
  height: 20px;
}

Or with four items and some even values

<span>Grid</span>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<span>Flex</span>
<div id="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

body > div {
  background-color: #ccc;
  width: 200px;
  height: 200px;
  flex-flow: column;
}

#grid {
  display: inline-grid;
  gap: 20%;
}

#flex {
  display: inline-flex;
  gap: 20%;
}

#grid > div,
#flex > div {
  background-color: coral;
  width: 20px;
  height: 20px;
}

[OnkarRuikar]

It feels a little wonky to use 24px here instead of 20px as with the others. What do you think about this:

Yes, 20px is easy to explain.

[bsmth]

Yes, 20px is easy to explain.

Looks better!

[bsmth]

I'm so sorry for dragging out this review... I've read through the description again and it can do with a reword because it's already describing percentage values. This branch has a suggested edit: https://github.com/OnkarRuikar/content/compare/css_gap...bsmth:content:css_gap_description?expand=1

Then the paras have these functions:

## Description

* what it is 
* how it works / looks
* use in grid
* use in flex
* use in multi-col
* percentage values
* history

I'm happy to merge after this!

[OnkarRuikar]

I've read through the description again and it can do with a reword because it's already describing percentage values.

Yes, the text made sense when it was a separate section. Now in the description section, it looks repetitive.

I've done the changes.

[bsmth]

Looks super. Thanks for your patience, Onkar!