خاصية Counter Increment في CSS

في حالتك تحتاج إلى وضع خاصية counter-increment ضمن المحدد grid div. بالشكل التالي:

.grid div {
  background-color: #057486;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  counter-increment: my-counter;
}

لأن div الذي بداخل grid هو العنصر الذي يتكرر و هو الذي تريد أن تطبق عليه العداد.

في حالتك العداد يُطبق على grid و بما أنه يوجد عنصر واحد فالعداد باق في 1، إن أردت التأكد جرب تكرار عُنصر grid مرة أو مرتين بالشكل:

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

ستجد أن عناصر الـ grid الأول بها Element1 و عناصر الـ grid الثاني بها Element2.