Gap Gap CSS
Neste tutorial, usaremos esta propriedade "Grid-gap" no CSS e explicaremos o conceito de "gap de grade" em detalhes, juntamente com diferentes exemplos.
Exemplo 1:
Começaremos com nosso primeiro exemplo criando um novo arquivo no software, código do Visual Studio. Quando criamos um novo arquivo no código do Visual Studio, podemos escolher o idioma e selecionamos HTML. O código HTML deve então ser criado. O Código do Visual Studio nos permite adquirir instantaneamente as tags fundamentais entrando “!”E depois clicando em“ Enter.”Então, vamos nos beneficiar dessa capacidade e coletar todas essas tags fundamentais. Na etiqueta de cabeça HTML, fornecemos um link para o arquivo CSS. Vamos criar um título e depois colocar um parágrafo abaixo deste título. Em seguida, criamos uma classe DIV principal com o nome "contador de grade" e colocamos sete outras classes div dentro desta div principal. Estamos dando nomes diferentes para todos os divs, como "Item1" para a Div Classe 1, "Item2" para a Div Classe 2, e assim por diante.
Estamos utilizando a propriedade "Alinhamento de texto" para o "corpo" e alinhando-a ao "centro". Em seguida, escolhemos "verde" como a "cor" do cabeçalho e também colocamos o "sublinhado" para a propriedade de "decoração de texto". A família da fonte é "argeliana". A “família de fontes” do parágrafo é “Times New Roman”. O "peso da fonte" é "ousado" e "marrom" a "cor". O "tamanho da fonte" que estamos definindo aqui é "20px" para o parágrafo e também "itálico" a fonte do parágrafo.
Agora, vamos definir a divisão principal chamada "contador de grade". Para isso, a "exibição" que usamos é a "grade". Em seguida, temos a propriedade "Grid-Template-Column", que é usada para especificar o número de colunas dentro de uma grade. Colocamos "Auto Auto Auto" como o valor dessa propriedade, o que significa que o tamanho da coluna é definido de acordo com o tamanho do contêiner. Aqui, temos três colunas neste layout da grade.
Agora, estamos definindo o "Grid-Column-gap" e "Grid-robap" separadamente. O "gap da coluna da grade" que estamos configurando é "40px" e o "gap-lobo da grade" é "20px". A “cor de fundo” do contêiner principal é “laranja” e o preenchimento que usamos aqui é “10px”. Esta propriedade de preenchimento é utilizada para gerar o espaço em torno do conteúdo.
Agora, vamos definir a “div” da “grade. contêiner ”, que representa todos os divs que estão presentes dentro da div principal. Estamos definindo a “cor de fundo” dos divs como “branca” e o texto que está escrito dentro deles está alinhado no “centro”. Depois de tudo isso, temos a propriedade "preenchimento" na qual definimos o preenchimento superior e inferior como "20px" e o preenchimento esquerdo, é "0". O tamanho da fonte que está escrito dentro desses divs é definido como "30px". Agora, veja a captura de tela de saída abaixo deste código.
Aqui, a lacuna ou o espaço entre as linhas é "20px" e o espaço entre as colunas é "40px" na captura de tela fornecida.
Exemplo # 2:
Neste exemplo, temos oito divs dentro da divisão principal “Contanha de grade”. Aplicaremos a propriedade "Grid-Gap" a este código, que é a propriedade abreviada em "Grid Column-gap" e "Grid-b-l-gap". Vamos definir a lacuna da coluna e a lacuna de linha dentro desta propriedade "Grid-gap".
Usamos a "cor" do cabeçalho como "laranja" e "decoração de texto" é definida aqui para "sublinhar". Além disso, a “família da fonte” é “argeliana”. Em seguida, definimos a “grade” para a propriedade “Display” e na “coluna de grade-template”, estamos usando quatro “automóveis” para que obteremos quatro colunas na saída.
Depois disso, temos a propriedade "Grid-gap" na qual definimos o tamanho do espaço em "%" para as colunas e linhas da grade. Nós o definimos como "5%", para que ele crie espaço de "5%" entre as colunas e "5%" entre as linhas. Utilizamos a “cor de fundo” para o “Light-Slate-Grey” e o “preenchimento” é “10px” para esta “grade. OnTatener ”. Aplicamos a “cor de fundo” às outras divs em “RGBA (122, 240, 122, 0.8), que é “verde-claro” e também, temos um “0.Valor alfa de 8 ”, por isso mostra alguma transparência.
Alinhamos o texto em "Center" e o "preenchimento" para o "top" e "inferior" é "20px" e "0" é para o preenchimento "esquerda" e "direito". O "tamanho da fonte" é "30px" neste código.
Na captura de tela fornecida, existem quatro colunas e o espaço entre as linhas e as colunas é "5%", pois definimos isso na propriedade "Grid-gap".
Exemplo # 3:
Aqui, temos doze divs neste exemplo e aplicaremos a propriedade "Grid-gap" neles. Além disso, definiremos o valor desta propriedade "Grid-gap" em "PX" no código CSS.
Para o "corpo", usamos o atributo "alinhado de texto" e o corrigimos para "centralizar". O "estilo de fonte" é "itálico". Em seguida, adicionamos o valor "grade" para a propriedade "Display". Usamos quatro "automóveis" na propriedade "Grid-template-coluna" para obter quatro colunas na saída. Depois disso, temos a propriedade "Grid-gap", que nos permite especificar o tamanho do espaço em "Pixel" para as colunas e linhas da grade. Definimos para "50px", o que significa que haverá "50px" de espaço entre as colunas e "50px" entre as linhas. A “cor de fundo” está definida como “rosa”. Além disso, criamos uma "fronteira" para esta div principal, que é definida como "1px Solid Black".
Aqui, temos "10px" do "preenchimento". Agora, estamos definindo a “cor de fundo” dos divs internos no formato “RGBA” e o defina como “RGBA (204, 90, 90, 0.8) ”que mostra transparência para esta cor. O valor da transparência aqui é “0.8 ”. O "preenchimento", o "tamanho da fonte" e a "família da fonte" são os mesmos que usamos nos exemplos acima.
Isso mostra que temos quatro colunas na saída e também o espaço entre as fileiras da grade e as colunas da grade é "50px" aqui.
Conclusão
O objetivo deste tutorial é ajudá-lo a entender como utilizar a propriedade "Grid-gap" CSS. Neste tutorial, analisamos a propriedade "Grid-gap" CSS e descrevemos o que a propriedade "Grip-gap" significa, por que usamos essa propriedade, como usar isso e como ela retorna a saída. O uso do "gap da grade" já foi discutido aqui. Explicamos essa propriedade que usamos para definir o tamanho do espaço entre as linhas e colunas da grade. Também mostramos exemplos de como usar a propriedade "Grid-gap", bem como os resultados de todos os exemplos neste tutorial.