Demo

Jenkins

demos.haus

quick chat-gpt based snippet to avoid partitioning into 3 without using the current grid at all /* Base styles for .row and its children /
.row {
display: grid;
grid-template-columns: repeat(1, 1fr); / Default to 1 column /
gap: 1rem; / Adjust the gap between items as needed */
}

.row > * {
grid-column: span 1; /* Default to span 1 column */
}

/* Container query for widths < 33ch */
@container (max-width: 32.99ch) {
.row {
grid-template-columns: repeat(1, 1fr);
}

.row > * {
grid-column: span 1;
}
}

/* Container query for widths >= 33ch and < 2*33ch (66ch) */
@container (min-width: 33ch) and (max-width: 65.99ch) {
.row {
grid-template-columns: repeat(2, 1fr);
}

.row > * {
grid-column: span 2;
}
}

/* Container query for widths >= 233ch (66ch) and < 433ch (132ch) */
@container (min-width: 66ch) and (max-width: 131.99ch) {
.row {
grid-template-columns: repeat(4, 1fr);
}

.row > * {
grid-column: span 2;
}
}

/* Container query for widths >= 4*33ch (132ch) */
@container (min-width: 132ch) {
.row {
grid-template-columns: repeat(4, 1fr);

(for easier copy-pasting: https://chatgpt.com/share/67618c6b-0668-8000-b0c6-079803ff13b7)

Highlighting an issue with that chatgpt output: it seems it is suggesting an illegal use of container queries to change grid column template.

.p-list--horizontal {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  .p-list__item {
    grid-column: span 4;
  }
  @container (min-width: 33ch) {
     // targeting the container itself within a container query is illegal
     .p-list--horizontal {  
         grid-template-columns: repeat(4, 1fr);
         .p-list__item {
            grid-column: span 2;
         }
      }
  } 
  @container (min-width: 66ch) {
     .p-list--horizontal {  
         grid-template-columns: repeat(8, 1fr);
      }
  } 
}

Something that could work is wrapping the lists in some wrapper element:

<div class="p-list--horizontal-wrapper">
  <ul class="p-list--horizontal">
    <li class="p-list__item is-ticked ">
      <p>10 year security maintenance and CVE Patching</p>
    </li>
    <li class="p-list__item is-ticked">
      <p>
        <a href="#">Kernel Livepatch</a> for 24/7 patching with no downtime
      </p>
    </li>
    <li class="p-list__item is-ticked">
      <p>
        <a href="#">Expanded security</a> for infrastructure and applications
      </p>
    </li>
    <li class="p-list__item is-ticked">
      <p>
        <a href="#">FIPS 140-2</a> cryptographic modules certified by NIST
      </p>
    </li>
    <li class="p-list__item is-ticked">
      <p>
        <a href="#">Common Criteria EAL2</a>: ISO/IEC IS 15408 validated by CSEC
      </p>
    </li>
    <li class="p-list__item is-ticked">
      <p>
        <a href="#">DISA/STIG</a> hardening for <abbr title="Department of Defence, USA">DoD</abbr>
        compliance
      </p>
    </li>
    <li class="p-list__item is-ticked">
      <p>
        <a href="#">CIS profiles</a> for cyber defence and malware prevention
      </p>
    </li>
  </ul>
</div>

 .p-list--horizontal-wrapper {
    @extend %fixed-width-container;

    container-type: inline-size;
    .p-list--horizontal {
      @extend %vf-list-with-state-icons;
      display: grid;
      column-gap: 1rem;

      .p-list__item {
        @extend %vf-list-item;
        border-top: $border;
      }
    }

    @container (width < 50ch) {
      .p-list--horizontal {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    @container (50ch <= width < 90ch) {
      .p-list--horizontal {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @container (width >= 90ch) {
      .p-list--horizontal {
        grid-template-columns: repeat(4, 1fr);

        // Skip the first column on large
        &.is-3-cols-on-large {
          .p-list__item {
            &:nth-child(3n + 1) {
              grid-column-start: 2;
            }
            &:nth-child(3n + 2) {
              grid-column-start: 3;
            }
            &:nth-child(3n + 3) {
              grid-column-start: 4;
            }
          }
        }
      }
    }
  }

Thanks Julie mostly looks good, save for the things below:

• looking at the combined example, a few things don't respect the baseline grid. For example:
  
  the padding-top / margin-bottom here should match whatever heading text element (p, h*) is used.

• If you turn on the baseline grid, can you tell whether these are freom new additions/changes, or older ones? I can see thesplit lists for example throw things off.

• Separately, on the dividers. Here's what I had in mind. The last rule ensures it doesn't overshoot when the screen is less wide than the fixed width. the extra 2rem are for the demo page border, which is 1rem on all sides. In terms of variables, we just need to subtract the grid margin variable * 2.

.p-list--horizontal-section>.p-list__item:nth-child(4n+1)::after {
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
    width: calc(80rem - 3rem);
    background: red;
    left: 0;
    max-width: calc(100vw - 5rem);
}

Preview:

@lyubomir-popov Addressing your points:

looking at the combined example, a few things don't respect the baseline grid... If you turn on the baseline grid, can you tell whether these are from new additions/changes, or older ones? I can see the split lists for example throw things off.

This appears to be already occurring in production. Our visual testing is reporting that the only visual changes introduced here are the new list variant examples. Possibly we have some other issue to resolve related to split list baseline alignment, and we can create a separate issue for it. Let me know if that works for you.

Separately, on the dividers. Here's what I had in mind. The last rule ensures it doesn't overshoot when the screen is less wide than the fixed width. the extra 2rem are for the demo page border, which is 1rem on all sides. In terms of variables, we just need to subtract the grid margin variable * 2.

.p-list--horizontal-section>.p-list__item:nth-child(4n+1)::after {
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
    width: calc(80rem - 3rem);
    background: red;
    left: 0;
    max-width: calc(100vw - 5rem);
}

I have synthesized our work from the pre-break pairing session with some polish of my own to make this even more robust (and avoid issues with page margin that we were seeing before).

I set the border pseudoelement widths to 100% * columns, making the borders span the full grid width without relying on more complex calculations, meaning we can set the width in one simple rule and avoid needing to set max-width using vw.

If you're curious, the code is below:

can someone pls restart the demo? cc @bartaz

can someone pls restart the demo? cc @bartaz

There are some docker issues on the demos right now, will restart when its fixed

I just noticed that the grid column gap is not properly set, will fix that shortly

@jmuzina looks great overall! A few nit picks:

• can we please make these lines muted, as per the logic (muted everywhere except above h2 titles at the beginning of a section):

• seems to be missing the grid-gutter between columns - see how the text is able to touch:

should look like so using the grid gutter variable:

• small typo (missing "to"):

• maybe add an "experimental" label, due to using not the grid but container queries?

@lyubomir-popov addressing your comments:

can we please make these lines muted, as per the logic (muted everywhere except above h2 titles at the beginning of a section):

Fixed

seems to be missing the grid-gutter between columns - see how the text is able to touch:

Fixed, using $grid-gutter-widths (2rem when width >= 66ch). No gap needed when width < 66ch, as there is only one column in that case.

small typo (missing "to"):

Fixed, thanks.

maybe add an "experimental" label, due to using not the grid but container queries?

Added

Last comment - can we please remove the line break avter the word "variants"?