Bar Chart: Gitterlinjer med gradient

Tilføj gitterlinjer bag søjlerne med repeating-linear-gradient(). Ændr retningen på gitterlinjerne i det eksisterende container-breakpoint.

<div class="bars-container">
  <article class="bars">
    <div class="bar" data-percent="100"></div>
    <div class="bar" data-percent="70"></div>
    <div class="bar" data-percent="60"></div>
    <div class="bar" data-percent="50"></div>
    <div class="bar" data-percent="40"></div>
    <div class="bar" data-percent="30"></div>
    <div class="bar" data-percent="20"></div>
    <div class="bar" data-percent="10"></div>
  </article>
</div>

Preview

Gitterlinjer

.bars {
  background:
    repeating-linear-gradient(
      var(--angle, to bottom),
      gainsboro 0 1px,
      transparent 0 25%
    );
  @container (inline-size < 400px) {
    --angle: to left;
  }
}

Opgavebeskrivelse