Nesting fieldset set to grid

Giganews Newsgroups
Subject: Nesting fieldset set to grid
Posted by:  Andrew Poulos (ap_pr…@hotmail.com)
Date: Wed, 2 Sep 2020

Within a form I've nested a fieldsets within a fieldsets. I have the
nesting because I need to be able to disable individual groups of inputs
as well as "all" the inputs.

<form>
  <fieldset class="top">
    <!-- a number of inputs and their labels here -->
    <fieldset class="nested">
      <!-- a number of inputs and their labels here -->
    </fieldset>
  </fieldset>

  <fieldset...
</form>

with this CSS

..top {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 360px;
  padding: 2px;
}

..nested {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 4px;
  margin-bottom: 12px;
}

The trouble I'm having is that "nested" doesn't seem to display as a
grid. DevTools tells me it's a grid with all the associated columns etc
but the grid's content displays vertically (one under the other) each
item 100% wide (instead of honouring their column and row settings).

If I changed the nested fieldset to a div the gird displays as expected.

What could be the issue with the nested fieldset grid not "working".

Andrew Poulos

Replies