1

If a fieldset element is set to display: grid, grid-gap will not work.

fieldset#grid {
  display: grid;
  grid-gap: 10px;
  box-sizing: border-box;
  border: solid red 1px;
}

.child {
  padding: 15px;
  background: blue;
}
<fieldset id='grid'>
  <div class='child'>
    <div>gc1</div>
    <div>gc2</div>
  </div>
  <div class='child'>c2</div>
  <div class='child'>c3</div>
  <div class='child'>c4</div>
  <div class='child'>c5</div>
</fieldset>

div#grid {
  display: grid;
  grid-gap: 10px;
  box-sizing: border-box;
  border: solid red 1px;
}

.child {
  padding: 15px;
  background: blue;
}
<div id='grid'>
  <div class='child'>
    <div>gc1</div>
    <div>gc2</div>
  </div>
  <div class='child'>c2</div>
  <div class='child'>c3</div>
  <div class='child'>c4</div>
  <div class='child'>c5</div>
</div>

You can change the fieldset to a div, and everything works fine. Exact same code. The only difference is the element.

Why is this the case?

How can I fix this?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
oldboy
  • 5,729
  • 6
  • 38
  • 86
  • grid like flex will not work with fieldset: https://stackoverflow.com/q/28078681/8620333 – Temani Afif Jun 02 '19 at 00:56
  • @TemaniAfif according to MDN, its a bug with Chrome and Edge. i just tested in Firefox and seems to be working fine there. – oldboy Jun 02 '19 at 01:07
  • @Michael_B can you explain how this is a duplicate of that other question?? – oldboy Jun 02 '19 at 01:07
  • in all the cases you shouldn't rely on it. button and fieldset are special elements and should not be considered for complex layout. – Temani Afif Jun 02 '19 at 01:08
  • @TemaniAfif that boggles my mind. not being able to change the `display` property of only two elements (`fieldset` and `legend`) is simply absurd – oldboy Jun 02 '19 at 01:10
  • @Anthony, a simple cursory glance at the duplicate will reveal to you why it's a duplicate, and provide you with a useful solution. – Michael Benjamin Jun 02 '19 at 01:15
  • 1
    @Michael_B it was joke, hence the "lol". try to let loose for once :p – oldboy Jun 02 '19 at 02:45

0 Answers0