Calendar

by core972

HTML

<div id="calendar">
  <div class="item" style="--dataStart: 3; --dataLength: 3;">Promo numéro 1</div>
  <div class="item" style="--dataStart: 9; --dataLength: 3;">Promo numéro 2</div>
  <div class="item" style="--dataStart: 5; --dataLength: 2;">Promo numéro 3</div>
  <div class="item" style="--dataStart: 12; --dataLength: 3;">Promo numéro 4</div>
  <div class="item" style="--dataStart: 2; --dataLength: 4;">Promo numéro 5</div>
  <div class="item" style="--dataStart: 5; --dataLength: 5;">Promo numéro 6</div>
  <div class="item" style="--dataStart: 9; --dataLength: 2;">Promo numéro 7</div>
  <div class="item" style="--dataStart: 8; --dataLength: 1;">Promo numéro 8</div>
</div>

CSS

#calendar {
  display: grid;
  width: calc(1920px * 2);
  height: 15rem;
  grid-auto-flow:column;
  grid-template-columns: repeat(53, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-gap: 0.125rem;
}
.item {
  grid-column: var(--dataStart) / span var(--dataLength);
  /*grid-row: var(--dataLine) / span 1;*/
  background-color: red;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.5rem;
}