Nesting fieldset set to grid

Giganews Newsgroups
Subject: Nesting fieldset set to grid
Posted by:  Andrew Poulos (ap_pr…
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.

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


with this CSS {
  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