post
Criando uma grade de repetição com CSS (Grid CSS)
Publicado em: 17/03/2023 / Atualizado em: 17/03/2023
Para criar uma grade repetida com 4 colunas utilizando CSS, podemos utilizar a propriedade “grid-template-columns”. O seguinte código CSS cria uma grade com 4 colunas e uma largura total de 800 pixels:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Repetição */
grid-gap: 10px; /* Espaçamento (padding) */
align-items: center; /* Alinhar ao centro na vertical */
justify-items: center; /* Alinhar ao centro na horizontal */
}Neste exemplo, a classe “container” é utilizada para definir a grade. A propriedade “display” é definida como “grid”, indicando que estamos criando uma grade. A propriedade “grid-template-columns” é definida pelo valor “repeat(4, 1fr)”, o que significa que estamos criando 4 colunas neste exemplo, mas você pode alterar para quantas precisar.
O valor “1fr” indica que cada coluna deve preencher uma fração igual da largura total. O valor “grid-gap” define a distância entre as células da grade.
Com esse código, podemos criar uma grade com 4 colunas que se ajusta automaticamente à largura do contêiner pai. Você pode, é claro, ajustar os valores para atender às suas necessidades específicas.
Espero que este artigo tenha lhe ajudado. Um forte abraço e até o próximo.
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/2615
ID de Referência: 2615
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.