aula03

Prévia do material em texto

Construção de Páginas Web II
Disposição com CSS Grid
Lucas Hermann Negri
Tecnologia em Sistemas para Internet
Instituto Federal de Mato Grosso do Sul (IFMS)
Campus Aquidauana
08/03/2018
CPW 2 - Lucas H. Negri Construção de Páginas Web II
Última aula
Construção de um blog utilizando a propriedade float
Uso do Flexbox para leiautes
CPW 2 - Lucas H. Negri Construção de Páginas Web II
Hoje
Exercício: construção de um leiaute de três colunas
com o Flexbox
Uso do Grid para o leiaute em duas dimensões
Projeto: reconstrução da página de professor
utilizando Grid
CPW 2 - Lucas H. Negri Construção de Páginas Web II
Grid
Poderoso sistema de leiaute presente no CSS
Trata da disposição em duas dimensões, enquanto o
flexbox lida com uma dimensão
Como o flexbox, opera com um container e os itens
deste container
Ainda não faz parte do padrão, mas muitos
navegadores já o suportam
CPW 2 - Lucas H. Negri Construção de Páginas Web II
Grid - Container
.container{
height: 100vh;
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 100px 1fr 1fr;
grid-template-areas:
"nav titulo"
"nav conteudo1"
"nav conteudo2";
}
CPW 2 - Lucas H. Negri Construção de Páginas Web II
Grid - Itens
.titulo{
grid-area: titulo;
background: red;
}
.nav{
grid-area: nav;
background: green;
}
CPW 2 - Lucas H. Negri Construção de Páginas Web II
Exemplo
Arquivo basico.html.
CPW 2 - Lucas H. Negri Construção de Páginas Web II
Material
Material recomendado:
http://chris.house/blog/
a-complete-guide-css-grid-layout
CPW 2 - Lucas H. Negri Construção de Páginas Web II