CSS Grid

GRID

Bimensional
Divisão de toda a página em linhas e colunas
Colocar elementos onde quiser nessa divisão

GRID OU FLEXBOX

Grid: Duas dimensões (colunas e linhas)
Flexbox: Uma dimensão (ou coluna ou linha)
Um complementa o trabalho do outro
Verificar quais navegadores ainda não estão aceitando o Grid

PROPRIEDADES

Vamos separar em 2 grupos: container e item(s)

Criando um projeto para exemplo

! + TAB - Inicia o projeto link + TAB Inserir o arquivo css

Zerando os estilos default:

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #7159c1;
}

Criando estrutura div.container>(header+main+aside+footer)

<div class="container">
  <header></header>
  <main></main>
  <aside></aside>
  <footer></footer>
</div>

Vamos colorir cada tag para visualizar a estrutura no browser

sytle.css

header {
  background: yellow;
  height: 100px;
}

main {
  background: blue;
  height: 100px;
}

aside {
  background: green;
  height: 100px;
}

footer {
  background: red;
  height: 100px;
}

CONTAINER

display: grid;
grid-template-columns;
grid-template-rows;
grid-gap
- grid-row-gap
- grid-column-gap
grid-template-areas;

Primeiro queremos ter duas colunas, para dividir o aside do conteúdo.

.container {
  display: grid;
  grid-template-columns: 3fr 1fr; //
}

Teremos também 3 linhas

.container {
  display: grid;
  grid-template-columns: 3fr 1fr; /** 1 fracao */
  grid-template-rows: 20vh 70vh 10vh; /** 20 visão de altura */
}

Se precisar espaçar os itens, poderiamos usar

.container {
  ...
  grid-row-gap: 20px;
  grid-column-gap: 50px;

  ou

  grid-gap: 20px 50px;

}

ITEM(s)

grid-column
- grid-column-start
- grid-column-end
grid-row
- grid-row-start
- grid-row-end
grid-area

A divisão de duas colunas teremos: 1___2___3 para ter duas colunas

syle.css

header {
  background: yellow;
  grid-column-start: 1;
  grid-column-end: 3;
}

main {
  background: blue;
  grid-column-start: 1;
  grid-column-end: 2;
}

aside {
  background: green;
  grid-column-start: 2;
  grid-column-end: 3;
}

footer {
  background: red;
  grid-column-start: 1;
  grid-column-end: 3;
}

Podemos usar outra notação para facilitar

syle.css

header {
  background: yellow;
  grid-column-start: 1;
  grid-column-end: 3;

  ou

   grid-column: 1/3;
}

main {
  background: blue;
  grid-column-start: 1;
  grid-column-end: 2;
}

aside {
  background: green;
  grid-column-start: 2;
  grid-column-end: 3;
}

footer {
  background: red;
  grid-column-start: 1;
  grid-column-end: 3;
}

A divisão das em 3 linhas, teremos

1_
2_
3_
4_

grid-row-start: 1;
grid-row-end: 3;

ou

grid-row: 1/3;

Facilitando com o areas

Na propriedade container ainda temos: grid-template-areas

.container {
  display: grid;
  grid-template-columns: 3fr 1fr; /** 1 fracao */
  grid-template-rows: 20vh 70vh 10vh; /** 20 visão de altura */
  grid-template-areas: "h h"
                       "m a"
                       "f f";
}

header {
  background: yellow;
  grid-area: h;
}

main {
  background: blue;
  grid-area: m;
}

aside {
  background: green;
  grid-area: a;

}

footer {
  background: red;
  grid-area: f;

}

Para colocar o header em uma coluna somente:

  grid-template-areas: "h ."
                       "m a"
                       "f f";

Alinhamentos Grid

Existem 6 propriedades para alinhamento:

justify-content
align-content
justify-items
align-items
justify-self
align-self

Vamos separá-los em 2 grupos:

justify e align
content, items e self

Justify e Align

Sabendo que o grid é bidimensional, nós temos o eixo x e y.

justify: O eixo x é o posicionamento horizontal, da esquerda para direita.

align : O eixo y é o posicionamento vertical, da cima para baixo.

Content, Items e Self

Vamos criar um novo arquivo html para entender

div.container>div*9

  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

Content

justify-content e align-content nós permite alinhar o próprio, relativo ao espaço fora do grid.

O uso dessas propriedades são raras, pois só é aplicado caso o grid seja menor que a area definida. (Por exemplo, quando usamos em px o tamanho do grid, podemos terminar com um grid pequeno, para o tamanho da area do grid)

Podemos usar 7 valores:

1- start

end
center
stretch (default)
space-between
space-around
space-evenly

/** não esqueça de zerar  **/
.container {
  background: black;
  width: 100vw; 
  height: 100vh;

  display: grid;
  grid-gap: 5px;
  grid-template: 10px 10px 10px/10px 10px 10px;

  justify-content: center;
  align-content: center;
}

.container > div {
  background: #7159c1;
}

align-content: start

justify-content: start	justify-content: center

justify-content: stretch	justify-content: space-around	justify-content: space-between

align-content: center	align-content: space-evenly

align-content e justify-content

space-evenly	center

Items

justify-items e align-items vai permitir alinhar os items do nosso grid, em qualquer espaço disponivel, na célula que ele habitar.

Podemos usar 4 valores:

1- start

end
center
stretch (default)

.container {
  background: black;
  width: 100vw; 
  height: 100vh;

  display: grid;
  grid-gap: 5px;
  grid-template: 1fr 1fr 1fr/1fr 1fr 1fr;

  justify-items: center;
  align-items: center;
}

.container > div {
  background: #7159c1;
  width: 50%;
  height: 50%;
}

justify-items e align-items

reduzindo celula	center

Self

justify-self e align-self vai permitir alinhar o item em si.

Faz a mesma coisa que o justify-items e align-items, porém, aplicado diretamente no item de um grid.

Antes estavamos aplicando a propriedade no container.

Podemos usar 4 valores: 1- start 2. end 3. center 4. stretch (default)

.container {
  background: black;
  width: 100vw; 
  height: 100vh;

  display: grid;
  grid-gap: 5px;
  grid-template: 1fr 1fr 1fr/1fr 1fr 1fr;
}

.container > div {
  background: #7159c1;
  width: 50%;
  height: 50%;
  justify-self: center;
  align-self: center;
}

justify-self e align-self

center

renatoapcosta/css_grid.md Secret