Solucionado
Eu basicamente só Adicionei um classname na tag main e estilizei ela
export default async function Home() {
const posts = await getAllPosts();
return (
<main className={Styles.postsContainer}>
{posts.map(post => <CardPost post={post} />)}
</main>
);
}
.postsContainer {
display: flex;
flex-wrap: wrap;
gap:32px;
}
Olá, Lucas, como vai?
Sua estilização está bem legal! O uso de display: flex é uma ótima abordagem para organizar os cards de forma responsiva. Essa configuração ajuda a distribuir os elementos de maneira uniforme, mantendo o layout limpo e adaptável a diferentes tamanhos de tela.
Se tiver mais ideias sobre como aprimorar o projeto, é só compartilhar! O fórum está à disposição para ajudar.
Siga firme nos seus estudos!
Abraços :)