Ao projetar uma página da web, alinhar os elementos em posições adequadas é de grande importância, além de torná -los responsivos, o que significa que eles alterarão seu comportamento, dependendo dos diferentes tipos de dispositivos que exibem a página da web. Uma maneira de executar as duas tarefas acima mencionadas é construir um sistema de visão de grade. Aqui nesta redação, vamos guiá-lo passo a passo sobre como fazer uma visualização de grade responsiva do zero.

Antes de pular em direção à sua construção, vamos explorar o que realmente é uma visão de grade.

O que é uma visão de grade?

Uma visualização de grade é uma técnica que particiona uma página da web em várias colunas que facilitam o posicionamento dos elementos. Uma visão da grade, que é responsiva por natureza, normalmente consiste em 12 colunas, juntamente com uma largura de 100% e escamas para cima e para baixo, dependendo do tamanho do navegador da web.

Agora vamos ver como construir uma visão de grade responsiva do zero.

Construindo uma visão de grade responsiva

Abaixo, demonstramos o procedimento passo a passo da construção de uma visualização de grade responsiva.

Pré -requisito

Antes de pular em direção à codificação, você precisa esboçar a visualização da grade no papel para saber exatamente onde colocar qual elemento. Por exemplo, aqui está o esboço da visão da grade que vamos construir.

Agora que temos nosso esboço, vamos começar a parte da codificação.

Passo 1

A necessidade básica de tornar uma página da web responsiva é adicionar uma meta tag responsiva no seu arquivo html.

Html

A largura = atributo de largura do dispositivo significa que a largura da página da web mudará na correspondência para a largura do dispositivo, enquanto que, em escala inicial = 1.0 atributo significa quando a página da web é carregada pelo navegador pela primeira vez o nível de zoom será 1.

Passo 2

Adicione alguns elementos HTML que você deseja exibir na página da web.

Html

Linux Dica

Para adicionar conteúdo em nossa seção de cabeçalho, estamos fazendo um contêiner div e envolvendo nossa direção dentro deste contêiner.

Html

• Sobre nós


• Autores


• Artigos publicados


• Categorias de artigos

Tudo sobre linguagens de programação!

Aqui você encontrará artigos bem escritos e bem estruturados relacionados a todas as linguagens de programação compostas por nossos autores refinados.

Com o objetivo de inserir conteúdo na barra lateral, fizemos uma div com nomes de classe “Col-3 barra lateral” e aninhados uma lista não ordenada dentro dela. No que diz respeito à seção principal, adicionamos dois parágrafos e os aninham dentro de outra div com nomes de classes “Col-9 Main”. Ambos os elementos da div estão mais aninhados em uma div maior com o nome da classe "contêiner".

As classes atribuídas aos elementos da div aninhada serão explicados mais tarde.

Etapa 3

Agora, terminamos nossa parte HTML e agora passamos para o nosso CSS parte do código. A primeira coisa que precisa ser feita na folha de estilo é definir a propriedade de tamanho de caixa dos elementos HTML para a caixa de fronteira.

CSS

*
Timing de caixa: caixa de fronteira;

A razão por trás disso é que essa propriedade inclui o preenchimento e a borda na altura total e na largura dos elementos HTML.

Etapa 4

Agora vamos converter nossa página em uma visão de grade responsiva de 12 colunas. Para fazer isso, precisamos executar certos cálculos para fornecer certas larguras a cada coluna e obter controle sobre a página da web quando se trata de organizar os elementos.

A largura de uma única coluna = 1/12 da largura total da tela = 100%/12 = 8.33%.

A largura de duas colunas combinadas = 2/12 da largura total da tela = 2 (100%)/12 = 16.66%

A largura de três colunas combinadas = 3/12 da largura total da tela = 3 (100%)/12 = 25%

A largura de quatro colunas combinadas = 4/12 da largura total da tela = 4 (100%)/12 = 33.33%

E assim por diante.

CSS

.Col-1 Width: 8.33%;
.Col-2 Width: 16.66%;
.Col-3 Width: 25%;
.Col-4 Width: 33.33%;
.Col-5 Width: 41.66%;
.Col-6 Width: 50%;
.Col-7 Width: 58.33%;
.Col-8 Width: 66.66%;
.Col-9 Width: 75%;
.Col-10 Width: 83.33%;
.Col-11 Width: 91.66%;
.Col-12 Width: 100%;

A largura de todas as colunas foi definida no CSS.

Observação:

Queríamos colocar nossa barra lateral e seção principal em duas colunas. Uma vista da grade com duas colunas se parece com isso.

Quando analisamos as larguras das várias colunas no código acima, descobrimos que três colunas terão 25% de largura e nove colunas terão 75% de largura. Portanto, a div que ninho na lista de menus foi atribuída o .Col-3 classe, considerando que a div com o conteúdo da seção principal foi dada .Col-9 aula.

Etapa 5

Agora usando a classe “.Col- ”, vamos fornecer um pouco de preenchimento às colunas e flutuar para a esquerda.

CSS

[classe*= "col-"]
flutuar: esquerda;
preenchimento: 10px;

A propriedade Float: Esquerda coloca essas colunas à esquerda do recipiente, segurando -as para que o texto e outros elementos embutidos envolvam dentro das colunas. No entanto, isso posicionará os elementos como se as colunas não estivessem lá. Portanto, temos que limpar o fluxo. Para fazer isso, siga o trecho de código abaixo.

CSS

.Container :: After
contente: "";
limpar ambos;
exibição: tabela;

O: após a aula e a propriedade de conteúdo é usada para adicionar conteúdo após o contêiner. Enquanto isso, o valor da tabela da propriedade Display fará com que o conteúdo apareça na forma de uma tabela I.e em linhas e colunas.

Etapa 6

.cabeçalho
Background-Color: Bisque;
cor branca;
preenchimento: 20px;

.barra lateral ul
margem: automático;
preenchimento: 0px;

.barra lateral li
preenchimento: 10px;
Margin-Bottom: 10px;
Background-Color: Rosybrown;
cor branca;

Por fim, agora estamos estilizando nossos elementos usando as classes atribuídas aos contêineres da div do cabeçalho e na barra lateral.

Saída

A página da web foi mostrada em larguras de tela aleatórias.

Esta é a nossa página da web em 1250px.

Nossa página da web na largura de 600px.

Conclusão

Para construir uma visão de grade responsiva, você precisa primeiro esboçar o layout que deseja que sua página da web divida sua página em várias colunas. Por exemplo, no exemplo usado neste artigo, dividimos nossa página em 12 colunas calculando a porcentagem de cada coluna. Posteriormente, você pode usar essa porcentagem para colocar seus elementos com precisão em várias colunas. Neste guia, mostramos um procedimento passo a passo para construir uma vista da grade do zero.