6.1 KiB
title | localeTitle |
---|---|
Grid Layout | Layout de grade |
Layout de grade
CSS Grid Layout, simplesmente conhecido como Grid, é um esquema de layout que é o mais novo e o mais poderoso em CSS. Ele é suportado por todos os principais navegadores e fornece uma maneira de posicionar itens na página e movê-los.
Pode atribuir automaticamente itens para áreas, tamanho e redimensioná-las, cuidar da criação de colunas e linhas com base em um padrão que você definir, e fazer todos os cálculos usando o recém-introduzido fr
unidade.
Por que grade?
- Você pode facilmente ter uma grade de 12 colunas com uma linha de CSS.
grid-template-columns: repeat(12, 1fr)
- A grade permite que você mova as coisas em qualquer direção. Ao contrário do Flex, onde é possível mover itens horizontalmente (
flex-direction: row
) ou verticalmente (flex-direction: column
) - não ambos ao mesmo tempo, o Grid permite mover qualquer item de grade para qualquer área de grade predefinida na página. Os itens que você move não precisam estar adjacentes. - Com o CSS Grid, você pode alterar a ordem dos elementos HTML usando apenas CSS . Mova algo de cima para baixo, mova elementos que estavam no rodapé para a barra lateral etc. Em vez de mover o
<div>
de<footer>
para<aside>
no HTML, você pode apenas alterar seu posicionamento comgrid-area
no Folha de estilo CSS.
Grelha vs. Flex
- Flex é unidimensional - horizontal ou vertical, enquanto Grid é bidimensional, o que significa que você pode mover elementos em planos horizontais e verticais
- No Grid, aplicamos estilos de layout ao contêiner pai e não aos itens. O Flex, por outro lado, tem como alvo o item flexível para definir propriedades como
flex-basis
,flex-grow
eflex-shrink
- Grid e Flex não são mutuamente exclusivos. Você pode usar os dois no mesmo projeto.
Verificando a compatibilidade do navegador com @supports
Idealmente, quando você cria um site, você o cria com o Grid e usa o Flex como um substituto. Você pode descobrir se o seu navegador suporta a grade com a regra CSS @support
(também conhecida como consulta de recurso). Aqui está um exemplo:
.container {
display: grid; /* display grid by default */
}
@supports not (display: grid) { /* if grid is not supported by the browser */
.container {
display: flex; /* display flex instead of grid */
}
}
Começando
Para tornar qualquer elemento uma grade, você precisa atribuir sua propriedade de display
à grid
, da seguinte forma:
.conatiner {
display: grid;
}
E é isso. Você acabou de fazer seu .container
uma grade. Todo elemento dentro do .container
se torna automaticamente um item de grade.
Definindo Modelos
Linhas e colunas
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;
Areas
grid-template-areas:
"aaaa"
"bcde"
"bcde"
"ffff";
ou
grid-template-areas:
"header header header header"
"nav main main sidebar";
Áreas da grade
Veja um exemplo de código sobre como definir e atribuir áreas de grade
.site {
display: grid;
grid-template-areas: /* applied to grid container */
"head head" /* you're assigning cells to areas by giving the cells an area name */
"nav main" /* how many values kind of depends on how many cells you have in the grid */
"nav foot";
}
.site > header {
grid-area: head;
}
.site > nav {
grid-area: nav;
}
.site > main {
grid-area: main;
}
.site > footer {
grid-area: foot;
}
A unidade fr
Grid introduz uma nova unidade fr
, que significa fração . A coisa boa sobre o uso da unidade fr
é que ela cuida dos cálculos para você. Usar o fr
evita problemas de margem e preenchimento. Com %
e em
etc., ele se torna uma equação matemática ao calcular o grid-gap
. Se você usou fr
unit, ele calculará automaticamente os tamanhos da coluna e da medianiz e ajustará o tamanho das colunas de acordo, além de não haver intervalos de sangramento no final.
Exemplos
Alterando a ordem dos elementos com base no tamanho da tela
Digamos que você queira mover o rodapé para baixo em pequenas telas e para a direita em telas maiores, e há um monte de outros elementos HTML entre os dois.
A solução simples é alterar as grid-template-areas
base no tamanho da tela. Você também pode alterar o número de colunas e linhas com base no tamanho da tela . Esta é uma alternativa muito mais limpa e simples ao sistema Grid do Bootstrap ( col-xs-8 col-sm-6 col-md-4 col-lg-3
).
.site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"main header"
"main sidebar"
}
@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
.site {
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer"
}
}
Veja o Pen CSS Grid pelo exemplo - 2 (grid areas + grid gap) por Aamnah Akram ( @aamnah ) no CodePen .
Mais Informações:
- CSS Grid Palyground by Mozilla Grande ponto de partida, se você é novo em CSS Grids. Tem recursos visuais para ajudá-lo a entender a terminologia facilmente
- YouTube: Morten Rand-Hendriksen: A grade CSS muda tudo (sobre os layouts da Web) Esta apresentação vai convencê-lo em menos de uma hora por que as CSS Grids são legais e por que / como você deve usá-las
- Vídeos: Aprenda Grid Layout Video Series por Rachel Andrew Rachel Andrew é considerado um especialista no assunto. Os títulos de vídeo podem parecer estranhos e esmagadores, mas o conteúdo é curto e direto ao ponto
- Livro: Prepare-se para layout de grade CSS por Rachel Andrew