Como usar um pouco de magia de grade CSS para projetar um aplicativo de calculadora

Deepika Gunda Blocked Unblock Seguir Seguindo 9 de janeiro

Este artigo é uma introdução rápida ao CSS Grid. Nós estaremos fazendo uma calculadora usando isto.

Este artigo é bom para desenvolvedores que têm um conhecimento básico de CSS e para aqueles que querem aprender as ferramentas mais recentes que o CSS oferece para estilizar páginas.

Eu gostei de modelos de área CSS Grid desde o início! Os exemplos em toda a web podem parecer complicados, mas confie em mim, uma tentativa de usá-los e você os amará e os usará em muitos de seus projetos.

Esse pensamento começou depois de querer fazer algo parecido com a imagem abaixo.

Calculadora

Note que os botões =, 0 e AC são duas vezes maiores que os botões normais. No começo eu pensei em usar o elemento HTML da tabela e colspan e rowspan para fazer isso. Mas então me perguntei se poderíamos usar o CSS Flexbox. Depois de não colocar o = e 0 e. Na mesma linha, comecei a perceber a necessidade de CSS Grid.

O código completo para isso está disponível aqui: CSS-Grid-Calculator .

O que é CSS Grid?

O Módulo de layout de grade CSS oferece um sistema de layout baseado em grade, com linhas e colunas, facilitando a criação de páginas da Web sem a necessidade de usar flutuadores e posicionamento. – do meu fav w3schools.com

Então eu diria que o layout principal e o conteúdo semelhante a uma tabela parecem grades, então podemos usar CSS Grid para estilizá-los.

Primeira coisa a fazer uma grade

Temos que usar o display: grid em qualquer container que precisa ser uma grade. Caso seja toda a página principal do site, podemos fazer assim:

 <html> 
 <style> 
#a Principal{
display: grade;
}
 </ style> 
 <body> 
<div id = "main">
</ div>
 </ body> 
</ html>

Qual é o próximo?

Digamos que você queira criar um site que tenha uma barra de navegação, barra lateral direita, barra lateral esquerda e parte intermediária do conteúdo. Normalmente, você deseja que a barra de navegação e as barras laterais tenham largura e altura fixas em termos de porcentagens de porta de visualização e que a parte de conteúdo seja expandida no espaço restante.

Então, como fazemos isso?

Layout de um site típico.

 <style> 
#a Principal{
display: grade;
grid-template-columns: 20vw auto 20vw;
grid-template-rows: 15vh auto;
grid-template-areas: "cabeçalho do cabeçalho"
"leftSB content rightSB";
 } 
#cabeçalho{
área de grade: cabeçalho;
}
#leftSB {
área de grade: leftSB;
}
#rightSB {
área de grade: rightSB;
}
#conteúdo{
área de grade: conteúdo;
}
 </ style> 
<body>
<div id = "main">
<div id = "header> header </ div>
<div id = "rightSB"> barra lateral direita </ div>
<div id = "leftSB"> barra lateral esquerda </ div>
<div id = "content"> content </ div>
</ div>
 </ body> 

Aqui está o que alcança o layout que precisávamos.

Explicação detalhada

Na foto acima, você pode ver que nós só precisamos criar divs simples que mantenham nosso cabeçalho, sidebars e conteúdo e adicioná-lo à raiz.

Na seção de estilo, adicionamos “display: grid” para o container principal.

Em seguida, podemos ver que, no geral, precisamos de 2 linhas e 3 colunas. É por isso que nós adicionamos a linha

 grid-template-columns: 20vw auto 20vw; 

Estamos dizendo que precisamos de 3 colunas, e que a primeira coluna deve ocupar 20% da largura da visão, que a próxima coluna é auto (que é todo o espaço disponível para ser tomado por esta coluna), e que a última coluna é novamente 20% da largura da vista.

 grid-template-rows: 15vh auto; 

Estamos aqui dizendo que precisamos de duas linhas no geral. A primeira linha será usada para um cabeçalho e será 15% da altura da janela de visualização, e o espaço restante é necessário para a segunda linha.

Agora vem as áreas de modelo de grade. Aqui definimos em nomes simples o que ocupará a grade. Digamos que queremos que o cabeçalho ocupe toda a primeira linha e que não haja divisões. Então usamos o seguinte:

 grid-template-areas: "cabeçalho do cabeçalho" 

Como temos 3 colunas, precisamos mencionar o cabeçalho 3 vezes. Usando o mesmo nome, o resultado será uma região de cabeçalho unificada.

 grid-template-areas: "cabeçalho do cabeçalho" 
"leftSB content rightSB";

Essas são as áreas completas de modelo de grade, que usam nomes simples para definir cada parte de nossa grade 2 * 3.

Agora que definimos o modelo de grade, vamos atribuir os divs a essas áreas. Portanto, usamos os IDs da div e atribuímos o nome da área de modelo usando a área de grade.

 #cabeçalho{ 
área de grade: cabeçalho;
}
#leftSB {
área de grade: leftSB;
}

É isso, agora definimos como esses divs devem ser posicionados em todos os tamanhos de viewport sem usar floats ou larguras em itens individuais e também sem usar bootstrap etc.

Não é alucinante? Veja o que criamos nestas poucas linhas em ação aqui .

Qual é o próximo?

Agora podemos trabalhar em nossos divs para adicionar barras laterais, navbars etc. Vou deixar este exemplo aqui e agora prosseguir para ver um projeto de calculadora pouco complicado usando CSS Grid.

Definindo os componentes

Temos uma seção de exibição de fórmula, a seção de exibição atual no topo. O resto são os botões 0–9, o botão AC (claro) e os botões do operador + – * / e =.

Então, vamos criar botões e divs para todos os componentes e mantê-los em um container.

 <body> 
<div id = "root">
<label id = "display"> 0 </ label>
<label id = "cdisplay"> 0 </ label>
<button id = "clear"> AC </ button>
<button id = "divide"> / </ button>
<button id = "multiplicar"> * </ button>
<button id = "seven"> 7 </ button>
<button id = "eight"> 8 </ button>
<button id = "nine"> 9 </ button>
<button id = "minus"> - </ button>
<button id = "four"> 4 </ button>
<button id = "five"> 5 </ button>
<button id = "six"> 6 </ button>
<button id = "plus"> + </ button>
<button id = "one"> 1 </ button>
<button id = "two"> 2 </ button>
<button id = "three"> 3 </ button>
<button id = "zero"> 0 </ button>
<button id = "dot">. </ button>
<button id = "equal"> = </ button>

</ div>
</ body>

Nossa calculadora final

Vamos ver a imagem da calculadora. Você pode ver que temos 4 colunas e 7 linhas. Então, vamos definir nossa grade:

 #raiz{ 
preenchimento: 5px;
cor de fundo: preto;
largura: 240 px;
altura: 280 px;
 display: grade; 
grid-template-columns: 1fr 1fr 1fr 1fr;
grade-modelo-linhas: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
intervalo de grade: 0,1px;
 áreas de modelo de grade: 
"display display display display"
"cdisplay cdisplay cdisplay cdisplay"
"clear clear divide multiply"
"sete oito nove menos"
"quatro cinco seis mais"
"um dois três iguais"
"zero zero ponto igual";
}

Quebrando isso …

 display: grade; 
grid-template-columns: 1fr 1fr 1fr 1fr;
grade-modelo-linhas: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Aqui dissemos que temos 4 colunas e 7 linhas e cada parte da grade é do mesmo tamanho. Observe que as colunas e linhas de modelo usam 1fr. Fr é uma unidade fracionária e 1fr é para 1 parte do espaço disponível.

Eu dei a raiz div uma largura de 240 px e altura de 280 px. Portanto, 1 fr é aproximadamente 60 px de largura * 40 px de altura.

 áreas de modelo de grade: 
"display display display display"
"cdisplay cdisplay cdisplay cdisplay"
"clear clear divide multiply"
"sete oito nove menos"
"quatro cinco seis mais"
"um dois três iguais"
"zero zero ponto igual";
}

Aqui definimos as áreas do modelo de grade.

As áreas do modelo de grade são um conjunto de cadeias de colunas de linha *. Você precisa adicionar quantas strings houver linhas na sua grade. Em cada linha de linha, você precisa mencionar o que cada coluna conterá. O número de itens em cada sequência deve corresponder à contagem de colunas.

Observe como a tela ocupa toda a primeira linha. Então, ele é adicionado 4 vezes na primeira linha de string.

O cdisplay, que é a exibição atual, ocupa a segunda linha e é definido de forma semelhante à exibição.

Em seguida vem os botões. O botão clear está na 3ª linha e na primeira e segunda colunas juntas. Por isso, é mencionado duas vezes na linha de filas 3.

E continua …

Agora que o trabalho principal acabou, precisamos atribuir essas áreas de grade aos divs.

 #exibição{ 
área de grade: exibição;
}
#cdisplay {
área de grade: cdisplay;
}
#Claro
{
área de grade: claro;
}
#dividir
{
área de grade: dividir;
}
#multiplicar
{
área de grade: multiplique;
}

Mostrei como as áreas da grade estão sendo atribuídas para 4 div's.

O exemplo completo pode ser encontrado aqui, onde adicionamos um pouco mais de estilo.

Empacotando

Como mencionado anteriormente, esta é apenas uma introdução ao CSS Grid e, mais especificamente, às áreas do modelo CSS Grid. Espero que este exemplo faça você pensar em CSS Grid quando você olhar para os sites a partir de agora e espero que você os use no futuro.

Se você gostou do meu artigo, por favor aplauda. É bastante encorajador para mim.

Se você fizesse a mesma tarefa, como você abordaria isso? Deixe-me saber nos comentários.