Desvendando o CSS-GRID

Baseado no vídeo: Desvendando o CSS Grid na prática | Mayk Brito

O Grid do CSS é uma técnica que permite criar layouts responsivos por meio do alinhamento de conteúdos e elementos em uma página HTML. Ele utiliza o método de linhas e colunas, onde podemos até definir regiões onde nossos elementos estarão na página. De início é importante manter em mente que o significado de dois termos:

Justify: utilizamos para alinhamento horizontal (eixo x).
Align: utilizamos para alinhamento vertical (eixo y).

Alinhamento de Itens

Aqui estamos utilizando um grid com 3 linhas em 3 colunas, onde cada todos os item são alinhados juntos, nesse caso, ao centro de sua respectiva célula. Pra isso utilizamos o 'justify/align-items'.

CSS

.container {
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr ;
    align-items: center;
    justify-items: center;
    /* Podemos usar 4 valores: start, end, center, stretch */
}

HTML

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

Alinhamento Self

Aqui temos um grid também com 3 linhas e 3 colunas, mas podemos trabalhar individualmente no alinhamento de itens. Basta setar o 'align/justify-self' no elemento filho do container que eu quero alinhar. No exemplo abaixo, os items em verde estão recebendo a classe 'center' que contém os alinhamentos ao centro.

CSS

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

.center {
    align-self: center;
    justify-self: center;
    background-color: green;
}

HTML

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

Alinhamento de Content

Aqui temos um grid também com 3 linhas e 3 colunas, mas podemos trabalhar no alinhamento do próprio grid, utilizando o 'justify/align-content'.

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, poderemos terminar com um grid pequeno, para o tamanho da area do grid)

CSS

.container{
    display: grid;
    grid-template: 10px 10px 10px / 10px 10px 10px;
    align-content: center;
    justify-content: center;
    /* Podemos usar 7 valores: start, end, strech, space-between, space-around, space-evenly. */  
}

HTML

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

Alinhamento por Template

Por meio do grid-template-areas podemos alinhar os elementos onde quisermos dentro de um container.

.container{
    display: grid;
    grid-template: 20vh 30vh 10vh / 3fr 1fr;

    grid-template-areas:
    "header header"
    "main aside"
    "footer footer";
}

E para cada item eu defino, o nome com o 'grid-area'

header  {background: yellow; grid-area: header}
main    {background: blue; grid-area: main}
aside   {background: green; grid-area: aside}
footer  {background: red; grid-area: footer}

HTML

<div class="container-4">
    <header>Header</header>
    <main>Main Content</main>
    <aside>Aside</aside>
    <footer>Footer</footer>
</div>

📕 Licença

Todos os arquivos incluídos aqui, incluindo este Readme, estão sob Licença MIT.
Criado com ❤ por Adriana Lima