JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div id="lista_pulseiras">

	<div class="item"><img  src="https://http2.mlstatic.com/D_NP_808411-MLB20562520906_012016-Q.webp">
  <div class="preco">R$3,00</div>
  </div>
  <div class="item"><img src="https://http2.mlstatic.com/D_NP_673164-MLB29306294708_022019-Q.webp"> 
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"> pulseira 3
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"> pulseira 4
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"> pulseira 5
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"> pulseira 6
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"> pulseira 7
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"> pulseira 8
   <div class="preco">R$3,00</div>
  </div>
  
</div>

CSS

#lista_pulseiras{
	display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill,150px); // definir a espesurra
  grid-auto-rows: 50px;//defini a largura
 
}
.item{
border:1px solid #c6c6c6;
padding: 10px;
}
.item img {
    width: 100%;
    height: 150px;
}
.preco{
  
}