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

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.