<main>
  <div class="wrapper">
    <article class="flow">
      <h1>HSL Colors</h1>
      <ul class="auto-grid" role="list">
        <li class="swatch">
          <div class="swatch__sample" style="background: hsl(344, 79%, 40%)" aria-hidden="true"></div>
          <code>hsl(344 79% 40%)</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: hsl(196 41% 56%)" aria-hidden="true"></div>
          <code>hsl(196 41% 56%)</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: hsl(40 91% 60%)" aria-hidden="true"></div>
          <code>hsl(40 91% 60%)</code>
        </li>
      </ul>
    </article>
  </div>
</main>
.swatch {
  padding: 0.5rem;
  border: 1px solid var(--color-stroke);
}

.swatch__sample {
  height: 120px;
  border: 1px solid var(--color-stroke);
  margin-bottom: 1rem;
}

.auto-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--auto-grid-min-size, 12rem), 1fr)
  );
  gap: 1rem;
  padding: 0;
}

li + li {
  margin: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.