Scribd
Carregar
15 visualizações6 páginas

Introdução ao CSS Grid em HTML

Enviado por

Isa Kuroki
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
15 visualizações6 páginas

Introdução ao CSS Grid em HTML

Enviado por

Isa Kuroki
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

CSS

GRID
EM HTML Aluna: Isabella dos Santos
O QUE É?

O CSS Grid é um sistema de layout bidimensional que


permite organizar elementos em uma grade de linhas e
colunas.
CARACTERÍSTICAS

● Geralmente tem 12 colunas;


● Simplifica o processo de divisão do espaço em
colunas e linhas
● Garante que todos os elementos estejam alinhados a
uma grade de linha de base
● Permite sobrepor itens intencionalmente
PRINCIPAL DIFERENÇA

Flexbox é uma solução unidimensional para layout, lidando


com o posicionamento de elementos em apenas uma direção,
linha ou coluna. Já o Grid é uma solução bidimensional para
layout, que lida com a posição de elementos em duas
direções, linha e coluna.
O flexbox é melhor para designs simples e responsivos, e o
grid, para designs complexos e precisos.
PROPRIEDADES
● display: grid: define o elemento como um container de grid;
● grid-template-columns: define o número e largura das
colunas;
● grid-template-rows: define o número e altura das linhas;
● grid-template-areas: define as áreas do grid;
● grid-gap: define o espaço entre as células do grid;
● grid-column: define as colunas onde o elemento será
posicionado;
● grid-row: define as linhas onde o elemento será
posicionado.
OBRIGADA PELA ATENÇÃO!

Você também pode gostar