<main>
  <div class="wrapper">
    <article class="flow">
      <h1>RGB Colors</h1>
      <ul class="auto-grid" role="list">
        <li class="swatch">
          <div class="swatch__sample" style="background: rgb(183 21 64)" aria-hidden="true"></div>
          <code>rgb(183, 21, 64)</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: rgb(96 163 188)" aria-hidden="true"></div>
          <code>rgb(96, 163, 188)</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: rgb(246 185 59)" aria-hidden="true"></div>
          <code>rgb(246, 185, 59)</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.