19.01.2025

Como Eliminar Bordas Duplas em CSS Grid: border-collapse

Resposta Rápida

Para remover bordas duplas em CSS Grid, aplique bordas aos itens da grade apenas de um lado. Use a pseudo-classe :not() em combinação com o seletor :last-child para criar bordas de largura uniforme. Aqui está um exemplo de implementação:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  background: white;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.grid-item:nth-child(3n) {
  border-right: none;
}

/* Se o número de linhas for fixo */
.grid-item:nth-last-child(-n+3) {
  border-bottom: none;
}

Lembre-se: aplicar bordas à direita e embaixo e, em seguida, removê-las de cada terceiro elemento (para 3 colunas - 3n) é uma ótima técnica! Se você souber o número de linhas, basta remover a borda inferior dos últimos elementos da linha para conseguir um visual limpo.

Dominando Habilidades de CSS Grid

Tabelas HTML estão se tornando coisa do passado; é hora de fazer a transição para codificação de layout com CSS Grid. Vamos destacar como gerenciar as bordas da grade para evitar duplicação indesejada.

Usando a Propriedade grid-gap

Utilize grid-gap para definir espaços entre os elementos e formar uma borda visual entre eles. A aparência da grade permanecerá limpa e fresca.

Margens e Contornos - Não Convencionais, mas Eficazes

Para evitar bordas duplas, ajustamos a posição dos elementos com margin: 0 -1px -1px 0;: as células individuais encobrem as bordas de seus vizinhos, cobrindo-as de forma eficaz. O contorno do elemento cria uma linha distinta ao redor de cada um deles.

Implementando box-sizing

Aplique box-sizing: content-box; para obter controle total sobre as dimensões da grade e excluir o impacto das margens e bordas sobre elas. Dessa forma, você mantém as bordas da grade inalteradas.

Visualização

Vamos imaginar que estamos construindo uma cerca feita de células CSS Grid:

Com sobreposição:        Sem sobreposição, a questão é clara:

  🟦🔲🟦🔲🟦🔲🟦               🟦🟦🟦🟦🟦 
  🔲🟦🔲🟦🔲🟦🔲               🔲🟦🟦🟦🟦🔲
  🟦🔲🟦🔲🟦🔲🟦               🟦🟦🟦🟦🟦🟦
  🔲🟦🔲🟦🔲🟦🔲               🔲🟦🟦🟦🟦🔲

🟦 representa uma célula com borda, enquanto 🔲 representa uma célula com problema de bordas duplas.

Com o uso apropriado de CSS, cada célula compartilha bordas com as células adjacentes sem criar bordas duplas, formando uma cerca bem arrumada.

Interatividade e Responsividade para um Grid Dinâmico

Para criar uma grade que se adapta ao conteúdo e ao tamanho da tela, use repeat(auto-fill, minmax(100px, 1fr)). Isso permite que você crie colunas que se ajustam ao conteúdo, garantindo tamanhos mínimos e máximos, assegurando um design responsivo.

Melhorando a Interatividade com Estados de Hover

Adicionar elementos interativos através do estado :hover aumentará o feedback visual quando os usuários interagirem com sua grade. Uma sutil mudança de cor, modificação de borda ou adição de sombra ao passar o mouse pode transformar uma grade estática em um elemento de design dinâmico.

Ajustando Precisamente a Posicionamento dos Elementos

Usando position: relative;, você pode controlar com precisão a colocação do conteúdo em cada célula da grade. Lembre-se de atribuir a cada elemento a classe .grid-item e adicionar a marcação HTML correspondente para uma exibição correta.

Lembrando Alternativas

Não devemos descartar as tabelas HTML como uma opção para criar bordas ocultas ou layouts mais simples. Se designs complexos de CSS Grid parecerem excessivos, voltar a soluções fundamentais pode ser a melhor escolha.

Recursos Úteis

1. Layout de grid CSS - CSS: Folhas de Estilo em Cascata | MDN — Seu guia e referência primária para CSS Grid.
2. Um Guia Completo para CSS Grid | CSS-Tricks — Aqui você encontrará explicações abrangentes e exemplos práticos de todos os aspectos do CSS Grid.
3. Perigos e Obstáculos do CSS Grid — Smashing Magazine — Aprenda a superar desafios comuns ao usar CSS Grid.
4. Grid Garden - Um jogo para aprender o layout de CSS Grid — Uma maneira divertida e interativa de dominar o CSS Grid sem perceber que você está aprendendo.
5. Grid by Example - Exemplos de uso do Layout CSS Grid — Familiarize-se com exemplos reais de uso do CSS Grid para enfrentar desafios de layout.
6. Módulo de Layout CSS Grid Nível 1 — Obtenha a especificação oficial do W3C para o módulo de layout CSS Grid diretamente dos autores.

Video

Navigation