O layout CSS Grid é um sistema de grade bidimensional projetado para ajudar os desenvolvedores da web a dividir elementos em colunas e linhas para criar um layout consistente e contínuo para aplicativos da web.
A lógica por trás do CSS Grid é que, se um desenvolvedor pegar um elemento como um div e exibir uma grade nele, ele pode então dividir o elemento em colunas e linhas-conhecidas coletivamente como trilhas-onde os itens podem ser retirados e colocados na grade. Com CSS Grids, tudo isso pode acontecer sem o trabalho extra de usar propriedades de posicionamento ( superior , direita , esquerda , inferior ).
Há casos em que se usaria estruturas CSS e outros em que se usaria CSS Grid, mas, como acontece com a maioria das coisas no desenvolvimento web, depende do seu caso de uso .
Neste artigo, vamos nos concentrar no design básico usando linhas, colunas e áreas para construir um aplicativo da web responsivo simples usando CSS Grid.
Grade CSS: Terminologia básica
Vamos começar reservando alguns minutos para entender alguns dos fundamentos básicos do CSS Grid.
- Contêiner de grade-a caixa que contém a grade. Este é o principal bloco de construção do CSS Grid
- Célula de grade-uma unidade em uma grade
- Área de grade-uma única célula ou várias células que assumem a forma de um quadrado ou retângulo (mas não em forma de L)
- Trilhas de grade-a coleção de linhas e colunas, definidas usando
grid-template-columnsegrid-template-rowspropriedades - Lacunas da grade-ajude a criar espaços na grade. Você não pode ter conteúdo em ou dentro de uma lacuna de grade.
- Grade explícita-definida por você usando
grid-template-columnsegrid-template-rows - Grade implícita-definida para você pelo navegador
Primeiros passos com CSS Grid
Exibir o recipiente e os elementos da grade
O contêiner de grade é o ponto de partida para exibir uma grade em um elemento. Para continuar com a grade, devemos primeiro exibir a grade no contêiner usando a sintaxe abaixo:
display: grid;
No CSS Grid, a relação entre o contêiner da grade e seus itens (elementos) é de pai e filho, respectivamente. Cada grade tem um contêiner que contém itens, e cada elemento colocado em uma grade é um item de grade.
Quando você transforma um contêiner em uma grade ( display: grid; ), todos os seus filhos diretos se tornam itens de grade automaticamente.
.container {display: grid; }12
Mas exibir itens como uma grade não faz muito por si só. É aqui que outros conceitos como grid-template-columns e grid-template-rows entram em jogo, como você verá em nosso trecho de código de demonstração do aplicativo abaixo.
Usando a unidade fr e a notação repeat ()
Embora possamos sempre usar unidades fixas de medidas como px na definição de grades, o layout de grade CSS também apresenta uma nova unidade de medida chamada unidade fr .
A unidade fr representa uma fração do espaço disponível no contêiner da grade e pode ser usada para criar faixas de grade flexíveis.
Aqui está um exemplo:
.container {
display: grade;
colunas-modelo de grade: 2fr 1fr 1fr;
}
O trecho de código acima irá dividir o espaço disponível em quatro partes: duas partes serão atribuídas à primeira faixa, enquanto as duas partes restantes serão atribuídas a uma faixa cada de acordo com o espaço disponível restante. Isso ajuda a garantir a consistência ao construir sua grade.
A notação repeat () também ajuda a garantir a consistência e pode ser usada para repetir toda ou parte de uma lista de faixas como:
.container {
display: grade;
colunas de modelo de grade: repetir (3, 1fr);
}
Demonstração: Construindo um aplicativo da web com CSS Grid
Veja a caneta
Demonstração da grade responsiva por Charles Freeborn ( @freeborncharles )
em CodePen .
Eu incluí o CodePen completo aqui, mas abaixo, vou quebrar os trechos de código com alguns comentários internos para mostrar como construir o aplicativo da web usando CSS Grid.
HTML
Primeiro, criaremos um modelo HTML simples e o preencheremos com algum texto fictício para ajudar a estabelecer alguma estrutura:
Site de grade de CSS responsivo de demonstração Um site de demonstração apresentando CSS Grid
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque pariatur possimus, também conhecido por quod ratione incidunt dicta assumenda repudiandae optio eveniet, quisquam fuga! Nam eaque fuga similique quia, esse non libero?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo libero doloremque, eum quis laudantium hic iste ab sed ipsum veniam, quam dolor rem cupiditate corrupti aliquam repudiandae officia soluta impedit!
Sobre
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt voluptatem reprehenderit non. Magni sit alias quia, vel quidem autem quos optio quam em porro aliquid necessitatibus aut et eos nulla.
Contato
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi consequuntur magnam ipsum, comodi quam, non dolorem numquam veritatis, qui nam voluptas asperiores neque magni. Placeat, natus reprehenderit. Fugit, voluptatum commodi.
CSS
Aqui, vincularemos a folha de estilo (CSS) ao nosso modelo HTML e implementaremos o layout usando CSS Grid. Adicionamos alguns comentários com os snippets de código para ajudar na clareza.
body { fundo: # F1F0EE; margem: 0;
} .container { /* primeiro, crie um contêiner de grade */ display: grade; /* define a quantidade e o tamanho de cada coluna. Aqui nós definimos 4 colunas com frações iguais */ colunas do modelo de grade: repetir (4, 1fr); /* cria trilhas horizontais como linhas e aqui criamos 4 linhas com tamanhos diferentes */ grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr; /* define onde cada elemento estará na grade. Conseguimos isso com grid-template-areas */ grid-template-areas: "nav nav nav nav" "principal principal principal principal" "cerca de cerca de barra lateral" "contato contato contato barra lateral" "footer footer footer footer"; /* podemos definir lacunas-calhas entre as linhas e colunas */ gap: 0,5 rem; altura: 100vh; peso da fonte: 800; tamanho da fonte: 12px; cor: # 004d40; alinhamento de texto: centro;
}
/* O estilo do Nav começa aqui */ nav { cor de fundo: # 3770F6; área de grade: nav;
} nav ul { estilo de lista: nenhum; tamanho da fonte: 16px; peso da fonte: mais negrito; flutuar: esquerda;
} li { display: bloco embutido;
} li a { cor: #ffffff;
} /* O estilo do Nav termina aqui */ a: hover { cor: # FF7F50;
} a Principal { área da grade: principal;
} main h2 { peso da fonte: mais negrito;
} main p {
alinhamento de texto: esquerda;
} .Barra Lateral { plano de fundo: # D3D4D7; área de grade: barra lateral;
} .sobre { plano de fundo: # D7D6D3; área da grade: cerca de;
} .contato { fundo: #BDBCBB; área de grade: contato;
} rodapé { cor de fundo: # 3770F6; área de grade: rodapé; cor: #ffffff;
} footer a { cor: #ffffff;
} uma { alinhamento de texto: centro; display: bloco; família de fontes: herdar; decoração de texto: nenhum; intensidade da fonte: Negrito; margem: 1rem;
} /* Para */ @media only screen e (max-width: 550px) { .container { colunas de modelo de grade: 1fr; grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr; grid-template-areas: "nav" "Barra Lateral" "a Principal" "sobre" "contato" "rodapé"; }
}
Grade CSS: principais pontos
Existem muitas maneiras de atingir objetivos semelhantes em CSS. Usar CSS Grid é apenas uma maneira de colocar elementos em linhas e colunas para criar aplicativos da web consistentes e perfeitos com interfaces amigáveis.
Para saber mais sobre CSS Grid, recomendo o W3 CSS Grid Layout Module e o Documentos da web MDN CSS Grid.
A postagem Como usar CSS Grid para construir um layout de web responsivo apareceu primeiro no LogRocket Blog .
