últimas postagens
Links Rápidos
Principais conclusões
- Gap CSS é uma propriedade versátil que define o espaçamento entre os elementos.
- gap é uma propriedade de atalho que pode assumir dois valores para definir intervalos de linhas e colunas.
- gap pode ser usado com layouts Flexbox, Grade e Multicolunas.
CSS oferece muitas maneiras de organizar elementos em suas páginas da web, desde posicionamento absoluto até design baseado em grade. O espaçamento ao redor e entre os elementos é igualmente importante e, novamente, há muitas opções. A propriedade gap é uma forma útil e versátil de introduzir espaços em branco e funciona com vários esquemas de layout diferentes.
O que é lacuna?
A lacuna CSS é uma propriedade de estilo simples, mas essencial, para ajudar a definir o espaçamento de seus layouts de design. Dar espaço aos seus elementos é uma das regras de ouro de composição que você deve aplicar para um design gráfico agradável e eficaz.
Você pode usar esta propriedade para especificar o tamanho dos espaços entre os itens em três formatos de layout:
Todos os navegadores modernos suportam a propriedade gap que complementa as propriedades do modelo de caixa, como margem e preenchimento.
Como escrever a propriedade CSS gap
A sintaxe básica para a propriedade gap é:
gap: <row-gap> <column-gap>;
Cada valor pode ter um comprimento ou uma porcentagem, e o intervalo entre colunas é opcional; sem ele, um único valor seria aplicado a linhas e colunas. Então:
gap: 10em;
…significa que linhas e colunas terão um intervalo de 10 vezes o tamanho da fonte atual, enquanto:
gap: 20px 10%;
…produzirá um intervalo de linha de 20 pixels e um intervalo de coluna que é um décimo da largura do elemento que o contém.
Você deve usar gap com elementos de contêiner que definem o layout, em vez de elementos dentro do contêiner. A propriedade visa criar um espaço uniforme entre os itens, em vez de um espaçamento variável mais complexo.
Usando lacuna com Flexbox
Você pode usar gap para controlar o espaço entre as linhas e colunas criadas por um layout flexível. A direção flexível que seu layout usa determinará se a lacuna de linha ou de coluna se aplica.
Por padrão, na direção normal da linha, os itens dentro de um flex container aparecerão um ao lado do outro. Então este CSS simples:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Produz este layout:
Observe que cada item dentro do contêiner usa propriedades clássicas de modelo de caixa para espaçamento: preenchimento e margem. Adicionando alguma lacuna:
.flex-layout { gap: 20px; }
Aumentará o espaço entre os itens flexíveis, mas não ao redor deles:
Se o seu layout flexível exibir itens em colunas e linhas, agrupando itens, por exemplo:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Você verá o efeito de ambas as lacunas:
Tenha sempre em mente que outras propriedades, como margem e conteúdo justificado, podem afetar o espaço entre os itens. Pense no intervalo como um valor mínimo, a menos que você controle explicitamente todas as outras propriedades que podem afetar o espaçamento.
Usando lacuna com grade
Você também pode usar gap com um layout de grade. A principal diferença é que normalmente você desejará especificar intervalos entre linhas e colunas, já que Grid é mais adequado para layouts bidimensionais.
Como em um layout Flex, o Grid exibirá os itens um ao lado do outro por padrão, embora você possa controlar o espaçamento em torno de cada item usando preenchimento e margem:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
O resultado é um layout de grade típico:
Adicionando uma lacuna:
.grid-layout {
gap: 80px 40px;
}
Irá inserir espaço entre cada item:
Observe como os valores individuais para o intervalo entre linhas e colunas se aplicam aqui, criando um intervalo entre as linhas que tem o dobro do tamanho (80px) do intervalo entre colunas (40px). Lembre-se de que, se você usar um único valor, estará definindo o mesmo intervalo entre linhas e colunas.
Usando lacuna com layouts de múltiplas colunas
Você também pode usar a propriedade gap com layouts de coluna, mas apenas um único valor é relevante neste caso; não há linhas. Os layouts de múltiplas colunas têm uma lacuna padrão:
.column-layout {
column-count: 3;
}
Mas é muito pequeno, com tamanho de 1em:
Isso é particularmente perceptível ao variar a fonte e, principalmente, se você estiver justificando o texto:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
As linhas de texto resultantes se cruzam e tornam-se desconfortáveis de ler:
Ao especificar uma lacuna, você pode aumentar o espaço entre as colunas, dando-lhes mais espaço para respirar.
.column-layout {
gap: 2em;
}
Você pode descobrir que 2em ou até 3em fornecem um resultado mais legível, dependendo de outros fatores, como a largura das colunas:
Lembre-se de que você pode usar um utilitário de navegador como as Ferramentas de Desenvolvimento do Google Chrome para verificar seus layouts e ver como propriedades como espaço e margem afetam seus layouts.
Ao usar dois valores para lacuna, verifique se eles estão na posição correta. A ordem “linha, coluna” pode não ser intuitiva, mas corresponde à ordem de outras propriedades de atalho, como preenchimento e margem.
A maneira exata como você usará o gap variará dependendo do esquema de layout ao qual você o está aplicando. Em geral, porém, você deve procurar espaços quando precisar de espaço regular entre os itens, mas não ao redor deles.