Introdução
Uma grade ou sistema de grade é uma coleção de linhas verticais e horizontais que definem uma estrutura para empilhar elementos de design de maneira consistente e gerenciável.
As grades são independentes do projeto, o que significa que podem ser usadas em qualquer projeto. Uma grade normalmente consiste em linhas, colunas e medianizes (o espaço entre as linhas e colunas). E permitem que os elementos de design sejam empilhados vertical ou horizontalmente.
As tecnologias da Web, como HTML e CSS, existem há anos sem um sistema de grade. No entanto, estruturas CSS como Bootstrap popularizaram o uso de sistemas de grade na web.
Além disso, W3C lançou o Módulo CSS Grid 1 para definir layouts bidimensionais baseados em grade. Grade CSS ou Layout de grade CSS atualmente não é um padrão oficial, é um recomendação do candidato W3C , mas tem o suporte da maioria dos navegadores principais.
Por que sistemas de grade?
Os sistemas de grade facilitam a criação de designs da web responsivos e otimizados para dispositivos móveis e são adequados para quase todos os tipos de layout. Eles também fornecem uma abordagem fácil e previsível para projetos de layout de andaimes que podem ajudar a melhorar a produtividade.
O que iremos construir
Existem várias maneiras de construir uma grade personalizada em CSS. Podemos usar a propriedade de float CSS , flexbox ou grade CSS. Neste artigo, usaremos o float porque é muito simples e é compatível com todos os navegadores. Abaixo está uma imagem da grade que iremos construir nesta seção:
Configuração do projeto
Vamos construir nossa grade com HTML 5 e SASS (que compila em CSS puro). Estamos usando SASS ( SCSS ) porque adiciona muito poder e elegância ao CSS. SASS recursos como aninhamento e o seletor pai são usados extensivamente neste projeto. Juntos, eles tornam nosso código limpo e sustentável.
Eu configurei um projeto inicial para nos ajudar a começar facilmente. Obtenha os arquivos iniciais clonando este repositório . Em seguida, siga as etapas abaixo para iniciar o dev server :
-
cdno diretório do projeto - instale dependências executando:
#NPM npm install #FIO instalação de fios
- Inicie o
dev serverexecutando:#NPM npm start #FIO início do fio
Agora você pode visualizar seu aplicativo em 127.0.0.1:8080
- Ainda precisamos observar nosso arquivo
SASSe compilá-lo. Para fazer isso, abra uma nova guia de terminal e execute:#NPM npm run sass #Fio fio run sass
Isso começa a observar nosso arquivo SCSS e o compila em nosso arquivo style.css . A configuração do nosso projeto agora está concluída. Podemos começar a construir nossa grade na próxima seção.
Construindo uma grade personalizada
A marcação para nossa grade já está fornecida nos arquivos iniciais. Nesta seção, vamos nos concentrar no estilo de nossa grade, seguindo as etapas abaixo:
Reinicialização básica usando o seletor universal *
O seletor universal (*) aplica os estilos declarados a todos os elementos HTML na página:
* { margem: 0px; preenchimento: 0px; dimensionamento da caixa: caixa de borda;
}
No código acima, redefinimos nossa margem e preenchimento para 0px. Isso ocorre porque os navegadores, por padrão, adicionam margem ou preenchimento a certos elementos (por exemplo, h1 elementos). Não queremos isso, pois pode complicar nosso cálculo.
A segunda ( caixa-sizing ) regra é mais interessante. Esta propriedade CSS nos permite alterar o comportamento do modelo de caixa CSS .
Consequentemente, mudamos a forma como a largura e a altura totais de um elemento são calculadas.
O valor da propriedade box-sizing pode ser usado para ajustar o comportamento do modelo de caixa CSS . Por padrão, o valor é definido como content-box .
Isso significa que a largura de qualquer borda ou preenchimento de um elemento é adicionada à largura final desse elemento. E isso torna o cálculo da largura final pouco claro.
Ao definir a propriedade box-sizing como border-box , o navegador não adiciona o preenchimento e a borda de um elemento à sua largura total. Portanto, é fácil calcular a largura de um elemento.
Configure um fluxo de trabalho para usar a unidade responsiva ( rem )
Este padrão nos oferece uma maneira fácil de alterar todas as medidas em nossa página com uma configuração simples. Envolve definir o tamanho da fonte raiz, para fácil cálculo usando rem como este:
html { tamanho da fonte: 10px;
}
Uma vez que 1rem é igual ao root font-size . 1rem em nosso caso agora é 10px . Isso tornará nosso cálculo mais fácil no futuro. Como sabemos que 2rem deve ser 20px , 1.6rem deve ser 16px , etc.
Além disso, agora podemos alterar todas as medidas em nossa página, alterando o tamanho da fonte raiz especificado acima.
Isso é muito importante. Por exemplo, quando atingimos um ponto de interrupção para exibir nossa página em um dispositivo móvel. Precisaremos de uma maneira de diminuir todas as medições em nossa página ao mesmo tempo.
Com nosso padrão atual, não precisamos escrever consultas de mídia complexas. Lidamos com isso alterando o tamanho da fonte global.
A seguir, salvaremos nossos valores estáticos em variáveis SCSS como este:
//GRID $ largura da grade: 100rem;//1000px $ sarjeta-vertical: 4rem;//40px $ sarjeta-horizontal: 4rem;//40px
Adicione a marcação da grade:
Nossa marcação acima consiste em seis linhas. Cada um possui um número variável de colunas. Cada div que é uma linha tem uma classe chamada row, enquanto cada div que é uma coluna tem uma classe com um nome começando com col-. A classe da coluna é nomeada dependendo de quantas colunas estão na linha.
Considere o código abaixo:
Col 1 de 2Col 1 de 2
O código acima é para uma linha com duas colunas iguais. Portanto, cada coluna possui uma classe chamada col-1-of-2 . Essa convenção de nomenclatura é mantida em toda a marcação. Esse padrão nos permite direcionar uma ampla gama de elementos para estilização, como veremos na próxima seção.
Definir o estilo das linhas e colunas
.row { largura máxima: $ largura da grade; margem: 0 automático; [classe ^="col-"] { flutuar: esquerda; cor de fundo: laranja; preenchimento: 1rem; }
}
O código acima fornece uma largura máxima para todas as linhas . Um max-width é usado porque tem melhor desempenho em dispositivos com uma porta de visualização pequena.
Elementos de nível de bloco (como nossas linhas) sempre se estendem e ocupam toda a largura de seu contêiner. Ao definir uma largura, evitaremos esse comportamento. Mas haverá um problema se a janela do navegador for menor que a largura do elemento. Nesse caso, os navegadores adicionarão uma barra de rolagem horizontal à página.
Para evitar isso, o max-width é usado em vez da propriedade width. Isso fará com que os elementos ocupem 100% da janela de visualização se a janela do navegador for menor que a max-width especificada. Portanto, funciona melhor em dispositivos menores.
A regra margin: 0 auto; centraliza um elemento de bloco dentro de outro elemento de bloco. Portanto, nossa grade está alinhada ao centro.
Nós estilizamos a coluna usando um atributo complexo seletor [class ^="col-"] . Aqui, colhemos os benefícios de nosso padrão de nomenclatura de classe de coluna mencionado acima. O seletor de atributo [class ^="col-"] direciona todos os elementos com um nome de classe que começa com col- e aplica os estilos declarados a eles. Portanto, as regras CSS acima, flutuam todas as nossas colunas para a esquerda, defina a cor de fundo como laranja e aplique um preenchimento de 1rem ( 10px ).
Existem outros padrões de correspondência para os seletores de atributo. Por exemplo:
-
[class $="col-"]selecionaria qualquer elemento com um nome de classe que termina com"col-" -
[class *="col-"]selecionaria qualquer elemento com um nome de classe que contenha"col-"
Você pode obter mais informações sobre este aqui .
Quando flutuamos todos os elementos filhos (colunas) em um elemento pai (linhas), os elementos pais se desmoronam. Conseqüentemente, a altura do elemento pai é 0 . Para corrigir isso, usamos o hack clearfix . O hack clearfix anexa um pseudoelemento após um elemento para limpar o flutuante como este:
.row:: after { contente:""; display: mesa; limpar ambos;
}
Podemos adicionar isso ao nosso código usando aninhamento SCSS e seletor & como este:
.row { largura máxima: $ largura da grade; margem: 0 automático; &::depois de { contente:""; display: mesa; limpar ambos; } [classe ^="col-"] { flutuar: esquerda; cor de fundo: laranja; preenchimento: 1rem; }
}
Em SCSS , o seletor & se refere ao elemento pai, neste caso, a (linha).
Crie calhas verticais e horizontais
Já declaramos as variáveis que armazenam os valores das calhas vertical e horizontal na etapa dois, como este:
$ gutter-vertical: 4rem; $ sarjeta-horizontal: 4rem;
Aqui, criaremos as calhas verticais e horizontais usando essas variáveis.
Para criar a sarjeta vertical, adicionamos uma margem inferior a todas as linhas, exceto a última linha.
E para criar a medianiz horizontal, adicionamos uma margem direita a todas as colunas dentro de uma linha, exceto a última coluna.
Isso não é direto porque, em ambos os casos, não queremos que a regra CSS se aplique ao último elemento. Para fazer isso, usaremos o : not () pseudo-seletor e a pseudo-classe do último filho .
Isso nos permite aplicar seletivamente nossa regra CSS da seguinte maneira:
.row { largura máxima: $ largura da grade; margem: 0 automático; &: não (: último filho) { margin-bottom: $ gutter-vertical; } &::depois de { contente:""; display: mesa; limpar ambos; } [classe ^="col-"] { flutuar: esquerda; cor de fundo: laranja; preenchimento: 1rem; &: não (: último filho) { margem direita: $ gutter-horizontal; } }
}
O último-filho pseudo-classe seleciona o último elemento em uma lista de elementos irmãos. Portanto, quando usado com o : not () pseudo-seletor , o : not () pseudo-seletor agora seleciona cada elemento, exceto o último-filho em uma lista de elementos irmãos. Portanto, nossa medianiz é aplicada a todos os elementos irmãos, exceto o elemento último-filho na lista.
Calcule a largura das colunas da grade
Este é o cálculo complicado para o qual usaremos o destino CSS extremamente poderoso função calc () . A função calc () nos permite realizar cálculos em CSS ao especificar propriedades CSS. Uma grande vantagem da função calc () é que ela nos permite misturar unidades ao realizar operações matemáticas como esta:
div { largura: calc (60%-50px); altura: calc (100rem/20%);
} p { tamanho da fonte: calc (1.5rem + 1vh);
}
Em nossa grade, temos seis linhas e cada uma tem um número variável de colunas, então faremos os cálculos em sucessão.
Calcule a largura das colunas col-1-of-2
A imagem acima ilustra a primeira linha. Ele tem uma max-width de 100 rem . E a medianiz entre as duas colunas ( col 1 de 2 ) é 4rem . Para obter a largura de cada uma dessas colunas, subtraímos a medianiz horizontal ( $ gutter-horizontal ) de 100% da largura do fileira. Isso nos dá a largura de ambas as colunas ( col 1 de 2 ), então dividimos nosso resultado por dois para obter a largura de cada coluna ( col 1 de 2 ) como esta:
.col-1-of-2 { largura: calc ((100%-$ sarjeta-horizontal)/2);
}
Calcule a largura das colunas col-1-of-3
Isso é semelhante ao nosso cálculo anterior. Mas, na imagem acima, temos duas calhas horizontais e isso precisa ser levado em consideração em nosso cálculo.
Subtraindo ambas as calhas horizontais (2 * $ gutter-horizontal ) de 100% da largura da linha nos dará a largura de todas as três colunas. Em seguida, dividir este resultado por três nos dará a largura de cada coluna col 1 de 3 :
.col-1-of-3 { largura: calc ((100%-2 * $ gutter-horizontal)/3);
}
Calcule a largura das colunas col-1-of-4
Conforme visto na imagem acima, isso também é semelhante aos nossos dois primeiros cálculos. No entanto, temos três calhas horizontais neste caso.
Subtraindo essas calhas horizontais (3 * $ gutter-horizontal ) de 100% da largura da linha, obtemos a largura de todos os quatro colunas col-1-of-4 . Em seguida, dividimos nosso resultado por quatro para obter a largura de cada coluna col 1 de 4 :
.col-1-of-4 { largura: calc ((100%-3 * $ gutter-horizontal)/4);
}
Calcule a largura da coluna col-2-of-3
De nossa imagem acima, a largura da coluna col-2-of-3 é a largura de duas colunas col-1-of-3 e a coluna horizontal calha. Como sabemos que isso nos dá a largura de uma coluna col-1-of-3 :
calc ((100%-2 * $ gutter-horizontal)/3)
Simplesmente multiplicamos isso por dois e adicionamos uma medianiz horizontal ao nosso resultado para obter a largura da coluna col-2-of-3 como mostrado abaixo:
.col-2-of-3 { largura: calc (2 * ((100%-2 * $ sarjeta-horizontal)/3) + $ sarjeta-horizontal);
}
Calcule a largura da coluna col-2-of-4
Na imagem acima, podemos ver que a largura das colunas col-2-of-4 é a largura de duas colunas col-1-of-4 e a sarjeta horizontal.
Podemos obter a largura de uma coluna col-1-of-4 usando isto:
calc ((100%-3 * $ gutter-horizontal)/4)
Agora, simplesmente multiplicamos isso por dois e adicionamos a medianiz horizontal ao resultado para obter a largura da coluna col-2-of-4 como esta:
.col-2-of-4 { largura: calc (2 * ((100%-3 * $ sarjeta-horizontal)/4) + $ sarjeta-horizontal);
}
Calculando a largura da coluna col-3-of-4
Na imagem acima, vemos que a largura da coluna col-3-of-4 é a largura de três colunas col-1-of-4 e a largura de duas calhas horizontais.
Podemos obter a largura de uma coluna col-1-of-4 usando o código abaixo:
calc ((100%-3 * $ gutter-horizontal)/4)
Agora, simplesmente multiplicamos isso por três e adicionamos duas calhas horizontais ( 2 * $ gutter-horizontal ) ao resultado desta forma:
.col-2-of-4 { calc (3 * ((100%-3 * $ gutter-horizontal)/4) + 2 * $ gutter-horizontal)
}
O código SCSS final é fornecido abaixo:
//GRID
$ largura da grade: 100rem;
$ sarjeta-vertical: 4rem;
$ sarjeta-horizontal: 4rem; * { margem: 0; preenchimento: 0; dimensionamento da caixa: caixa de borda;
} html { tamanho da fonte: 10px
} .fileira { largura máxima: $ largura da grade; margem: 0 automático; &: não (: último filho) { margin-bottom: $ gutter-vertical; } &::depois de { contente:""; display: mesa; limpar ambos; } [classe ^="col-"] { flutuar: esquerda; cor de fundo: laranja; preenchimento: 1rem; &: não (: último filho) { margem direita: $ gutter-horizontal; } } .col-1-of-2 { largura: calc ((100%-# {$ gutter-horizontal})/2); } .col-1-of-3 { largura: calc ((100%-2 * # {$ gutter-horizontal})/3); } .col-2-of-3 { largura: calc (2 * ((100%-2 * # {$ gutter-horizontal})/3) + # {$ gutter-horizontal}); } .col-1-of-4 { largura: calc ((100%-3 * # {$ gutter-horizontal})/4); } .col-2-de-4 { largura: calc (2 * ((100%-3 * # {$ gutter-horizontal})/4) + # {$ gutter-horizontal}); } .col-3-of-4 { largura: calc (3 * ((100%-3 * # {$ gutter-horizontal})/4) + 2 * # {$ gutter-horizontal}); } }
É importante notar que no SCSS temos que envolver nossas variáveis em # {} antes que possam trabalhar com o CSS
Você pode obter todo o código desta grade em CodePen ou clonando este repositório .
Conclusão
Nossa grade acima cobre muitos cenários e mais podem ser adicionados conforme a necessidade, já que é construída de forma personalizada. Ao construir esta grade, tocamos em alguns CSS avançados que espero que você ache interessante. E embora tenhamos construído este sistema de grade usando float, também é possível usar flexbox ou grade CSS.
Por último, espero que, ao construir a grade personalizada acima, você saiba como os sistemas de grade são configurados, como funcionam e agora possa construir sua própria grade personalizada.
A postagem Compreendendo a grade CSS criando a sua própria grid apareceu primeiro no LogRocket Blog .
