post

Criando uma grade de repetição com CSS (Grid CSS)

Publicado em: 17/03/2023

Categorias: BlogCSS

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.


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.

Bruno Devs News

Clique Aqui para Assinar a News


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.

Clique aqui e entre em contato


Comentários