greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/portuguese/css/layout/grid-layout/index.md

6.1 KiB
Raw Blame History

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 com grid-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 e flex-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: