alguém pode me ajudar a fazer com que os produtos fiquem passando parecido com isso exemplo: https://www.zattini.com.br/ não achou descer mais e vai aparecer os produtos
html dos produtos
<main>
<ul class="produtos" style="width: 1309.121px;">
<li class="tamamho">
<img src="roupa01.jpeg" width="220" height="310">
<p class="produto_nome_roupa">Roupa 1</p>
<p class="produto-preço">R$ 50,00</p>
<p class="produto-frete">Frete Grátis</p>
</li>
<li class="tamamho">
<img src="roupa02.jpeg" width="220" height="310">
<p class="produto_nome_roupa"> Roupa 2 </p>
<p class="produto-preço">R$ 40,00</p>
<p class="produto-frete">Frete Grátis</p>
</li>
<li class="tamamho">
<img src="roupa03.jpeg" width="220" height="310">
<p class="produto_nome_roupa">Roupa 3</p>
<p class="produto-preço">R$ 60,00</p>
<p class="produto-frete">Frete Grátis</p>
</li>
<li class="tamamho">
<img src="roupa04.jpeg" width="220" height="310">
<p class="produto_nome_roupa">Roupa 4</p>
<p class="produto-preço">R$ 30,00</p>
<p class="produto-frete">Frete Grátis</p>
</li>
<li class="tamamho">
<img src="roupa05.jpeg" width="220" height="310">
<p class="produto_nome_roupa">Roupa 5</p>
<p class="produto-preço">R$ 80,00</p>
<p class="produto-frete">Frete Grátis</p>
</li>
</ul>
</main>
css dos produtos
.title {
font-size: 45px;
text-align: center;
margin-top: 90px;
font-weight: bold;
}
.tamanho {
left: 50em;
}
.produtos {
width: 1010px;
margin: 0 auto 0 50px;
}
.produtos li{
display: inline-block;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 20px 100px;
height: 4rem;
width: 17em;
}
.produtos li:hover .produto_nome_roupa {
font-size: 40px;
width: 118px;
}
.produtos .produto_nome_roupa {
font-size: 30px;
font-weight: bold;
}
.produto_nome_roupa {
width: 118px;
}
.produto-preço {
font-size: 22px;
font-weight: bold;
margin-top: 10px;
width: 89px;
}
.produto-frete {
font-size: 18px;
color: #4b8b3b;
width: 98px;
}