Lacuna - CSS-Tricks

Anonim

A propriedade gap em CSS é uma abreviação de row-gape column-gap, especificando o tamanho das medianizes, que é o espaço entre linhas e colunas em layouts de grade, flex e multi-coluna.

/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )

Use o controle deslizante na demonstração abaixo para ver a gappropriedade em ação:

Sintaxe

gap aceita um ou dois valores:

  • Um único valor define ambos row-gape column-gappelo mesmo valor.
  • Quando dois valores são usados, o primeiro define o row-gape o segundo define o column-gap.
.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )

A especificação do CSS Grid Layout Module definiu o espaço entre as trilhas da grade usando a grid-gappropriedade. gapdestina-se a substituí-lo para que as lacunas possam ser definidas em vários métodos de layout CSS, como flexbox, mas grid-gapainda precisa ser usado em casos em que um navegador pode ter implementado, grid-gapmas ainda não começou a oferecer suporte à gappropriedade mais recente .

Valores

gap aceita os seguintes valores:

  • normal: (Padrão) O navegador irá especificar um valor usado de 1em para o layout de várias colunas e 0px para todos os outros contextos de layout (ou seja, grade e flex).
  • : Qualquer comprimento CSS válido e não negativo, como px, em, reme %, entre outros.
  • : O tamanho da lacuna como um valor percentual não negativo em relação à dimensão do elemento. (Veja abaixo para detalhes.)
  • initial: Aplica a configuração padrão da propriedade, que é normal.
  • inherit: Adota o valor do intervalo do pai.
  • unset: Remove a corrente gapdo elemento.

Porcentagens nas propriedades de lacuna

Quando o tamanho de um contêiner na dimensão da lacuna é definido, gapresolve as porcentagens em relação ao tamanho da caixa de conteúdo do contêiner em qualquer tipo de layout.

Em outras palavras, quando o navegador conhece o tamanho do container, ele pode calcular o valor percentual do gap. Por exemplo, quando a altura do contêiner é 100px e o gapestá definido como 10%, o navegador sabe que 10% de 100px é 10px.

Mas quando o navegador não sabe o tamanho, ele se pergunta, “10% de quê?” Nesses casos, gapse comporta de maneira diferente com base no tipo de layout.

Em um layout de grade, as porcentagens resolvem contra zero para determinar as contribuições de tamanho intrínseco, mas resolvem contra a caixa de conteúdo do elemento ao dispor o conteúdo da caixa, o que significa que colocará espaço entre os itens, mas o espaço não afeta o tamanho do contêiner.

Nesta demonstração, a altura do contêiner não é definida. Veja o que acontece quando você aumenta o gaptamanho. Em seguida, defina as gapunidades de pixel e tente novamente:

Em um layout flexível, as porcentagens resolvem em relação a zero em todos os casos, o que significa que as lacunas não se aplicam quando o tamanho do contêiner não é conhecido pelo navegador:

Usando a função calc () com lacuna

Você pode usar a calc()função para especificar o tamanho do gapmas, no momento em que este livro foi escrito, não havia suporte para ele no Safari e iOS.

.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); ) 
 .grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )

Exemplos

A gappropriedade foi projetada para uso em layouts de grade, flex e multi-colunas. Vamos verificar alguns exemplos.

Layout de grade

Na demonstração a seguir, você pode ver gapsendo usado para especificar as propriedades row-gape column-gapem um contêiner de grade, definindo as medianizes entre as linhas e colunas da grade, respectivamente:

Layout flexível

Aplicar lacuna ao eixo principal de um flex container indica o espaçamento entre os flex items em uma única linha do flex layout.

Aqui está column-gapusado em uma direção de linha:

Aqui está row-gapusado em uma direção de coluna:

Aplicar gapao eixo cruzado de um contêiner flexível indica o espaçamento entre as linhas flexíveis do layout flexível.

Aqui está row-gapuma direção de linha:

Aqui está column-gapa direção da coluna:

Layout de várias colunas

column-gapaparece em layouts de várias colunas para criar lacunas entre as caixas de coluna, mas observe que row-gapnão tem efeito, pois estamos trabalhando apenas em colunas. gapainda pode ser usado neste contexto, mas apenas o column-gapserá aplicado.

Como você pode ver na próxima demonstração, embora a gappropriedade tenha um valor de 2rem, ela só separa os itens horizontalmente em vez de ambas as direções, pois estamos trabalhando em colunas:

Quanto mais você sabe…

Há algumas coisas que vale a pena observar sobre como trabalhar com a gappropriedade.

É uma boa maneira de evitar espaçamentos indesejados

Você já usou as margens para criar espaçamento entre os elementos? Se não tomarmos cuidado, podemos acabar com espaçamento extra antes e depois do grupo de itens.

Resolver isso geralmente requer a adição de margens negativas ou o recurso a pseudo-seletores para remover a margem de itens específicos. Mas o bom de usar gapmétodos de layout mais modernos é que você só tem espaço entre os itens. A sujeira extra no início e no final nunca é um problema!

Mas, ei, se você quiser ter espaço ao redor dos itens durante o uso gap, coloque paddingao redor do contêiner assim:

.container ( display: flex; gap: 1rem; padding: 1rem; )

O tamanho da calha nem sempre é igual ao valor da lacuna

A gappropriedade não é a única coisa que pode colocar espaço entre os itens. Margens, preenchimentos justify-contente align-contenttambém podem aumentar o tamanho da calha e afetar o gapvalor real .

No exemplo a seguir, estamos definindo um 1em gap, mas, como você pode ver, há muito mais espaço entre os itens, causado pelo uso de alinhamentos distribuídos, como justify-contente align-content:

Suporte de navegador

As consultas de recursos geralmente são uma boa maneira de verificar se um navegador oferece suporte a uma propriedade específica, mas, neste caso, se você verificar a gappropriedade no flexbox, poderá obter um falso positivo porque uma consulta de recursos não fará distinção entre os modos de layout. Em outras palavras, pode ser suportado em um layout flexível que resulta em um resultado positivo, mas na verdade não é suportado se for usado em um layout de grade.

Layout de grade

IE Beira Raposa de fogo cromada Safári Ópera
Não 16+ 61+ 66+ 12+ 53+
iOS Safari Opera Mobile Navegador Android Chrome para Android Firefox para Android
12+ Não 81+ 84+ 68+

Layout de grade com valores calc ()

IE Beira Raposa de fogo cromada Safári Ópera
Não 84+ 79+ 84+ Não 69+
iOS Safari Opera Mobile Navegador Android Chrome para Android Firefox para Android
Não Não 81+ 84+ 68+

Layout de grade com valor percentual

IE Beira Raposa de fogo cromada Safári Ópera
Não 84+ 79+ 84+ Não 69+
iOS Safari Opera Mobile Navegador Android Chrome para Android Firefox para Android
Não Não 81+ 84+ 68+

Layout flexível

A especificação para usar gapcom o flexbox está atualmente no status Working Draft.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
84 63 Não 84 TP

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 Não Não

Layout de várias colunas

IE Beira Raposa de fogo cromada Safári Ópera
Não 84+ 79+ 84+ Não 69+
iOS Safari Opera Mobile Navegador Android Chrome para Android Firefox para Android
Não Não 81+ 84+ 68+

Mais Informações

  • Módulo de alinhamento de caixa CSS nível 3
  • Chromium pousa abertura Flexbox (Ticket # 761904)
  • Status do recurso WebKit CSS

Relacionado

  • Layout de grade
  • Layout Flexbox
  • Layout de várias colunas