Como o CSS Gap adiciona espaço para melhorar os layouts da Web

Ligações rápidas

⭐ O que é o gap?

⭐ Como escrever a propriedade CSS gap

⭐ Utilizar o gap com Flexbox

⭐ Utilizar o gap com Grelha

⭐ Utilizar o gap com Layouts Multi-Layouts de várias colunas

Principais conclusões

A propriedade CSS gap serve como um meio adaptável para delinear a relação interespacial entre vários componentes de design no layout de uma página da Web.

O atributo “gap” oferece um meio conveniente para especificar o espaçamento horizontal e vertical, designando valores separados para linhas e colunas, respetivamente.

A utilização de um elemento vazio é compatível com vários sistemas de disposição CSS, como Flexbox, Grelha e disposições de várias colunas.

As folhas de estilo em cascata (CSS) fornecem uma série de métodos para organizar a colocação de elementos numa página Web, desde técnicas de posicionamento precisas a designs mais flexíveis baseados em grelhas. Igualmente crucial a considerar é a interpersão e a distribuição do espaço em branco em redor e entre estes componentes, o que pode ser conseguido através de várias abordagens. Um desses métodos é a utilização da propriedade de lacuna, conhecida pela sua adaptabilidade em diversas configurações estruturais.

O que é o gap?

No domínio do design visual, a utilização de espaços em branco e a manipulação hábil da propriedade CSS “gap” são princípios fundamentais para conseguir uma disposição esteticamente apelativa e funcionalmente correcta. A aplicação criteriosa desta propriedade aparentemente simples serve como pedra angular para a criação de composições harmoniosas que ressoam com os espectadores tanto a nível cognitivo como emocional.

Pode utilizar este atributo para designar as dimensões dos interstícios entre elementos em três disposições espaciais distintas:

⭐ Flexible Box Layout (“Flexbox”)

⭐Grid Layout

⭐Multi-column Layout

Todos os navegadores web contemporâneos mantêm o atributo gap, que serve como um elemento complementar às qualidades do modelo de caixa, como margens e paddings.

Como escrever a propriedade CSS gap

A estrutura fundamental da propriedade gap pode ser expressa da seguinte forma:

 gap: <row-gap> <column-gap>;

Cada valor pode consistir numa medida ou numa proporção e, opcionalmente, num espaçamento entre linhas ou colunas. Quando não é especificado qualquer intervalo, o número de linhas e colunas é determinado por um único valor.Consequentemente, podemos encontrar as seguintes configurações:

 gap: 10em; 

Isto implica que tanto as linhas como as colunas apresentarão um espaçamento dez vezes superior ao tamanho atual do tipo de letra.

 gap: 20px 10%; 

A implementação criará um espaçamento de 20 unidades na direção horizontal (linha) e uma separação igual a um décimo da largura do elemento envolvente na direção vertical (coluna).

Ao utilizar elementos de contentor para efeitos de disposição, recomenda-se a utilização de espaços em vez de incorporar elementos individuais espaçados nos referidos contentores. Esta abordagem procura estabelecer um espaçamento consistente entre itens, em vez de criar variações intrincadas e inconsistentes no espaçamento.

Usando gap com Flexbox

Você pode utilizar a propriedade “gap” em um layout flex para regular o espaçamento entre as linhas e colunas, com a direção do layout determinando qual tipo de gap é aplicável; gap de linha ou gap de coluna.

A disposição predefinida de um item num contentor flexível é normalmente disposta lado a lado ao longo do eixo principal ou da direção da linha, quando não são fornecidas instruções específicas. Isto pode ser conseguido com um estilo mínimo usando o seguinte trecho de código:

 .flex-layout {
    display: flex;
}

.flex-layout div {
    padding: 1em;
    margin: 10px;
    outline: 1px solid black;
} 

Produz este layout:

Cada elemento contido num contentor principal utiliza atributos tradicionais do modelo de caixa, como o preenchimento e a margem, para estabelecer o espaçamento entre eles. É criada uma ligeira separação através da adição de uma pequena quantidade de espaço utilizando a propriedade “gap” em CSS.

 .flex-layout { gap: 20px; } 

Aumentar o espaçamento entre os itens flex resultará na criação de um espaço entre cada item, sem deixar espaço adicional à volta dos próprios itens individuais.

Quando um layout flex é utilizado para exibir elementos que abrangem várias colunas e linhas, empregando técnicas como wrapping, pode-se dizer que os itens são exibidos em ambas as direções. Este tipo de disposição permite uma utilização eficiente do espaço, mantendo um aspeto organizado.

 .flex-layout {
    gap: 20px 40px;
    flex-wrap: wrap;
} 

Verá o efeito de ambos os intervalos:

Ao considerar a disposição dos elementos num esquema, é importante ter em conta que propriedades como margin e justify-content podem afetar a distribuição do espaço entre componentes individuais. A este respeito, a propriedade gap deve ser vista como uma medida de base, tendo em conta que outros factores podem influenciar o espaçamento geral.É essencial não assumir que a definição de gap por si só proporcionará um controlo total sobre a colocação de elementos, mas sim considerar a forma como outras propriedades relevantes interagem e contribuem para determinar o resultado final.

Utilizar o espaço com a grelha

Também pode utilizar espaços em conjunto com um layout de grelha, embora haja algumas distinções a considerar ao fazê-lo. Normalmente, é necessário definir o espaço com a grelha. Normalmente, será necessário designar o espaçamento entre linhas e colunas, uma vez que a Grelha está melhor equipada para disposições multidimensionais.

As disposições em grelha também apresentam uma propensão inerente para alinhar elementos adjacentes, que pode ser alterada através da utilização de ajustes marginais e amortecimento intraluminal.

 .grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}

.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
} 

O resultado é uma disposição de grelha típica:

Acrescentar um espaço:

 ​.grid-layout {
    gap: 80px 40px;
} 

Inserirá espaço entre cada item:

Considere o impacto de valores distintos de espaço entre linhas e colunas na criação de um espaço com o dobro da largura do espaço que separa as colunas, mantendo a consistência no espaçamento entre linhas e colunas. Lembre-se de que, ao empregar um valor uniforme, ele determinará a distância comum entre linhas e colunas.

Usando o espaço com layouts de várias colunas

As colunas em um layout de coluna também podem utilizar a propriedade de espaço para espaçamento entre colunas. No entanto, ao usar um layout de valor único, apenas um valor de espaço é aplicável e ele se aplica a todas as colunas coletivamente, em vez de individualmente a cada linha. Os layouts de várias colunas baseados em colunas possuem um espaço padrão inerente que determina o espaço entre elas.

 .column-layout {
    column-count: 3;
} 

A medida do tamanho do tipo de letra é expressa em unidades em, que são relativas ao tamanho do tipo de letra do elemento principal. Uma unidade em é igual ao tamanho atual do tipo de letra do elemento principal multiplicado por um. Assim, se o elemento principal tiver um tamanho de letra de 16 píxeis, uma unidade em será equivalente a 16 píxeis ou aproximadamente 0,375 polegadas.

Este fenómeno torna-se mais pronunciado quando se altera o tipo de letra e, em particular, quando se alinha o conteúdo ao longo dos seus bordos:

 .column-layout {
    font-size: 14pt;
    line-height: 1.4;
    text-align: justify;
} 

A concatenação das frases acima mencionadas conduz a uma formatação sobreposta e congestionada, que pode impedir a legibilidade e causar desconforto durante a leitura.

Aumentar o espaço entre colunas, definindo uma margem específica, permite um melhor alinhamento visual e espaço para respirar, resultando numa melhor legibilidade e na estética geral do design.

 .column-layout {
    gap: 2em;
} 

Pode descobrir que a utilização de tamanhos de letra como 2em ou 3em pode produzir um resultado mais legível, tendo em conta considerações adicionais como as dimensões das larguras das colunas.

A utilização de uma ferramenta baseada no navegador, como as disponíveis nas Ferramentas de desenvolvimento do Google Chrome, proporciona um meio eficaz de examinar o layout e observar como atributos específicos, incluindo espaçamento e margens, afectam o seu aspeto geral.

Ao utilizar valores duplos para o espaço, certifique-se de que estão organizados da forma correcta. Embora a disposição “linha, coluna” possa parecer contra-intuitiva, está alinhada com a ordem de atributos de atalho adicionais, como o preenchimento e a margem.

A lacuna é uma ferramenta versátil que pode ser aplicada de várias formas, com base nos requisitos de design específicos do seu projeto. No entanto, a sua função principal mantém-se consistente em todas as aplicações - proporcionar um espaçamento uniforme entre elementos, mantendo um aspeto limpo e organizado.