Why are my CSS grid starts and spans not working?

Question

I want to arrange some playing cards in a clock shape, using a grid and grid positioning.

So far I have created 13 divs with id #1, #2, #3, etc. Each grid contains 4 nested images of playing cards, e.g.

<div id='clock'>
          <div id='1'>
            <img class='card1' src={cards.cAC} />
            <img class='card2' src={cards.cAH} />
            <img class='card3' src={cards.cAS} />
            <img class='card4' src={cards.cAD} />
          </div>
          <div id='2'>
            <img class='card1' src={cards.c2C} />
            <img class='card2' src={cards.c2H} />
            <img class='card3' src={cards.c2S} />
            <img class='card4' src={cards.c2D} />
          </div>

And so on, to 13 divs in total.

I created my css grid and two sample positions for divs #1 and #2 for starters:

#clock {
  display:grid;
  grid-template-columns: repeat(27, 1fr);
  grid-template-rows: repeat(17, 60px);
}

#1 {
  grid-column: 13 / span 3;
  grid-row: 1 / span 3;
}

#2 {
  grid-column: 18 / span 3;
  grid-row: 2 / span 3;
}

But the divs are still just auto-filling the grid with span 1 in each case as below - what am I doing wrong?

Edit: here's the grid I am trying to recreate: