No CSS comum, você aprendeu que atribuir um display grid a um elemento não faz nada até que você especifique as linhas e colunas da grade. É assim que funciona no Tailwind também. No Tailwind, para atribuir uma linha de grade e uma coluna de grade, você usaria suas respectivas classes utilitárias assim:

<div class="grid grid-cols-[num] grid-rows-[num]">
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>

Atribua ao wrapper div as classes utilitárias grid-cols-1 e md:grid-cols-3. A classe grid-cols-1 organiza os três itens em uma única coluna, empilhando-os verticalmente. Em telas médias e maiores, md:grid-cols-3 altera o layout para três colunas, exibindo os itens lado a lado.

Testes:

• Seu elemento `div` deve ter a classe `grid-cols-1`.
• Seu elemento `div` deve ter a classe `md:grid-cols-3`.