Domine o Grid Layout CSS com nosso guia passo a passo e aprenda a criar grades para inserir suas imagens de forma organizada em suas páginas.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, vou te mostrar como usar o grid layout para que você consiga criar grades no CSS.
Você vai aprender como fazer grade para inserir suas imagens de forma organizada na sua página através do grid layout CSS.
Além disso, vou te ensinar a posicionar os elementos na grade no CSS com o espaçamento correto entre os elementos da grade!
Curtiu esse conteúdo? Então faça o download do material disponível e vem comigo aprender a criar grades no CSS com esse guia passo a passo.
Para acompanhar esta aula, é importante que você tenha pelo menos o VS Code instalado e a extensão Live Server.
A extensão Live Server nos permite visualizar no navegador o resultado de todos os códigos que estivermos desenvolvendo dentro do VS Code.
Caso queira conferir como baixar, instalar e personalizar seu VS Code com as extensões utilizadas ao longo dessa e de outras aulas de HTML e CSS aqui da Hashtag, confira essa aula aqui.
No material disponível para download, você encontrará o nosso arquivo HTML com o código da nossa página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid no CSS</title>
</head>
<body>
<div class="grid">
<img
src="https://www.hashtagtreinamentos.com/wp-content/uploads/2024/03/5-Melhores-Formulas-do-Power-BI-1-1024x576.png"
alt="Imagem do Blog"
/>
<img
src="https://www.hashtagtreinamentos.com/wp-content/uploads/2024/03/Codigo-Modular-1-1024x576.png"
alt="Imagem do Blog"
/>
<img
src="https://www.hashtagtreinamentos.com/wp-content/uploads/2024/03/Curso-Basico-de-Python-2024-1-1024x576.png"
alt="Imagem do Blog"
/>
<img
src="https://www.hashtagtreinamentos.com/wp-content/uploads/2024/03/Criar-Graficos-Dinamicos-1-1024x582.png"
alt="Imagem do Blog"
/>
</div>
</body>
</html>Esse é um arquivo HTML bastante simples. Nele, temos a tag <head> com as configurações gerais da página e o <body>, que é o corpo do documento onde inserimos todo o conteúdo visível dela.
Dentro do <body>, temos uma <div> com a classe grid, que será o conteúdo que iremos ver ao longo dessa aula. Dentro dessa <div>, temos 4 imagens <img> com o texto alternativo das imagens (alt).
Podemos visualizar essa página clicando com o botão direito do mouse sobre o arquivo HTML e selecionando a opção Open with Live Server, que criará um servidor local para que possamos testar o site em nossos computadores.
Você pode observar que as imagens estão dispostas sem uma formatação e uma organização adequada na página.
Dentro do CSS, existem algumas formas de criarmos layouts responsivos, uma delas é o Flexbox, que vimos na aula passada, e o Grid Layout.
Cada uma delas tem suas vantagens, mas com as duas é possível construir diversos estilos de layouts.
Geralmente, quando quisermos construir um layout bem dividido, com um número específico de colunas e linhas, o ideal será utilizar um Grid Layout.
Para esta aula, vamos utilizar a estilização através de um arquivo CSS externo. Portanto, na pasta onde está o seu arquivo HTML, crie um arquivo chamado style.css.
Além disso, precisamos vincular nosso arquivo CSS ao arquivo HTML. Para isso, dentro da tag <head> do nosso documento HTML, vamos criar um link com o arquivo CSS usando a tag <link>.
Nesse link, definiremos o atributo rel com o valor stylesheet, indicando que este é um recurso de estilização. O atributo href receberá o caminho para o arquivo CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid no CSS</title>
<link rel="stylesheet" href="style.css" />
</head>Feito isso, as edições que fizermos no arquivo style.css serão refletidas em nossa página.
Essa é uma das três formas de utilizarmos o CSS. Se você quiser aprender mais sobre as outras maneiras de aplicarmos o CSS, confira esta aula aqui.
Para estilizar a nossa página e construir o layout de grade, precisamos trabalhar com a classe .grid dentro do CSS. Para selecionar uma classe no CSS, utilizamos um ponto antes do nome da classe.
.grid {
}Feito isso, temos nosso seletor que garantirá que todos os elementos com a classe .grid serão estilizados pelos parâmetros que passarmos para ele.
O primeiro passo será transformar o display desses elementos em uma grade, usando a propriedade display.
.grid {
display: grid;
}Voltando para o navegador onde a página está aberta e atualizando, poderemos visualizar essa mudança através da ferramenta de desenvolvedor. Basta pressionar a tecla F12 com a página aberta, que essa ferramenta será aberta.
Dentro dela, conseguimos visualizar o código HTML e CSS da nossa página. Clicando no ícone escrito grid, ao lado da nossa <div>, iremos visualizar já a delimitação das grades para as imagens criadas.
Além disso, dentro da ferramenta do desenvolvedor, na parte do CSS, podemos visualizar o Grid Editor, assim como temos o Flexbox Editor. Também podemos utilizar o Grid Editor para estilizar a nossa página.
Esse editor nos permite alterar várias propriedades do nosso Grid Layout, visualizando as transformações diretamente na página antes de implementá-las em nosso código.
Se você acompanhou a aula sobre o Flexbox CSS, você verá que é bem similar ao Flexbox Editor.
Apesar de já termos criado o nosso Grid, você pode ter reparado que as imagens continuaram dispostas da mesma forma como estavam. Isso ocorre porque nós ainda não passamos nenhuma informação para ele, como o número de colunas e linhas.
Então, de volta ao nosso arquivo CSS, vamos passar as propriedades grid-template-columns, que definirá o tamanho padrão de cada uma das colunas.
Por padrão, utilizamos a unidade fr, que representa quantas frações do espaço cada coluna deve ocupar.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}Ao definir o valor da propriedade como 1fr 1fr, estamos informando que teremos duas colunas, com cada uma ocupando 1 fração do espaço disponível. Visualizando essa alteração na página, teremos as imagens dispostas dessa forma:
Além disso, ao inserir imagens soltas no HTML, elas tendem a ocupar o seu tamanho original, resultando em uma barra de rolagem horizontal em nosso layout.
Para corrigir esse problema, podemos definir o tamanho máximo das imagens a partir do elemento pai delas, garantindo assim que elas ocupem apenas o tamanho disponível por ele. Isso nos permite controlar melhor a distribuição das imagens na tela.
O elemento pai é aquele que contém as imagens, nesse caso será a nossa <div> com a classe .grid.
Para limitar as imagens ao tamanho máximo do elemento pai, vamos definir um seletor de tag img e passar a propriedade max-width com o valor de 100%. Isso garantirá que todas as imagens vão ficar com no máximo de 100% do espaço disponível para elas.
Esse espaço é definido pelo tamanho do elemento pai, que iremos definir com o max-width de 800px.
.grid {
max-width: 800px;
display: grid;
grid-template-columns: 1fr 1fr;
}
img {
max-width: 100%;
}Dessa forma, nossas imagens ficarão organizadas em duas colunas, onde cada imagem ocupará 100% do espaço disponível para ela dentro de 800px. Ou seja, cada coluna ocupará 400px de largura.
Uma dica de sintaxe no CSS é utilizar a função repeat(). Ao invés de termos que escrever 1fr 1fr, podemos utilizar a função repeat() para replicar esse padrão, passando como argumento quantas vezes queremos repetir a configuração e qual a configuração desejada.
.grid {
max-width: 800px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
img {
max-width: 100%;
}Podemos ajustar o espaçamento entre os elementos dentro do nosso grid. Para isso, utilizaremos a propriedade gap.
.grid {
max-width: 800px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}Com essa propriedade, conseguimos adicionar um espaçamento de 10px entre todas as colunas e todas as linhas.
Dentro do grid, é possível reposicionar os elementos das imagens dentro da grade. Por exemplo, podemos pegar a nossa última imagem e defini-la como sendo a primeira.
Quando selecionamos nosso Grid Layout pela ferramenta do desenvolvedor, conseguimos observar uma numeração na nossa grade.
Esses números são os índices de colunas e linhas do nosso grid e nos permitem posicionar os elementos dentro do grid através deles.
Para fazer isso, primeiro vamos atribuir uma classe à nossa última imagem dentro do arquivo HTML.
<img
class="ultima-imagem"
src="https://www.hashtagtreinamentos.com/wp-content/uploads/2024/03/Criar-Graficos-Dinamicos-1-1024x582.png"
alt="Imagem do Blog"
/>E dentro do CSS, podemos usar o seletor de classe para definir em qual índice de coluna e linha ela deve iniciar e finalizar.
Para isso, utilizaremos as propriedades grid-column e grid-row, passando primeiro o valor no qual o elemento deve começar, depois barra, e o valor no qual ele deve terminar.
.ultima-imagem{
grid-column: 1/2;
grid-row: 1/2;
}Dessa forma, estamos indicando que essa imagem deve começar na primeira coluna e terminar na segunda coluna, e o mesmo para a linha.
Perceba que os outros elementos seguem o fluxo normal. Então, como passamos a imagem de Excel para a primeira linha e a primeira coluna, os outros elementos avançaram uma posição para ajustar a distribuição.
Ao criar nosso grid layout, definimos a construção dele a partir das colunas, mas da mesma forma que fizemos isso, poderíamos defini-lo a partir das linhas com a propriedade grid-template-rows.
.grid {
max-width: 800px;
display: grid;
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}Porém, ao fazer isso, você verá que a página não ficará como o esperado. Teremos todas as imagens em uma única coluna.
Isso acontece por causa do fluxo dos itens dentro do grid. O fluxo é o modo como os elementos dentro da grade são dispostos.
Por padrão, o fluxo é definido por linha. Como estamos construindo a grade a partir das linhas, precisamos alterar o controle do fluxo para colunas.
.grid {
max-width: 800px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: column;
gap: 10px;
}
Dessa forma, teremos as imagens dispostas corretamente novamente, mas agora sendo criadas a partir das linhas, com o fluxo definido pelas colunas.
Isso nos permite uma grande variedade de layouts apenas personalizando e configurando o CSS Grid.
Na aula de hoje, eu te mostrei como usar o Grid Layout para que você possa criar grades no CSS e personalizar os elementos em sua página através de um layout em grade.
Além disso, você viu como dispor esses elementos, alterando a ordem deles e também o espaçamento.
A partir disso, você será capaz de melhorar a disposição dos elementos em suas páginas, organizando-os de forma mais eficiente e prática.
Para acessar publicações de HTML e CSS, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador