Criando mosaicos facilmente com grid-area e grid-template-area

Vocês conhecem esse modo de organizar um layout com o display grid usando grid-area e grid-template-area?
Eu gosto de usar pra montar mosaicos mas pode ser usado pra montar até mesmo o layout da página toda.

Primeiro você faz o desenho do layout que quer montar (só pra facilitar a visualização)
Exemplo:

Depois você estrutura seu HTML.
Eu gosto de utilizar as classes pra montar o layout quando vou utilizar o grid-area.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Grid</title>
</head>
<body>
    <div class="container">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
        <div class="item-4"></div>
    </div>
</body>
</html>

Depois você coloca as propriedades no CSS que irão montar o mosaico.

1- Você irá setar o display grid no "container", ele que irá organizar a disposição dos itens no mosaico, vou colocar também uma altura para o meu mosaico, nesse caso



.container {
display: grid;
height: 300px;
}

2- Você vai setar um "apelido" para cada item do mosaico, usando a propriedade "grid-area", aproveitei para colocar um background.



.item-1 {
    grid-area: item-1;
    background: #ec934a;
}

.item-2 {
    grid-area: item-2;
    background: #e46c6c;
}
.item-3 {
    grid-area: item-3;
    background: #85fd7b;

}
.item-4 {
    grid-area: item-4;
    background: #7fbdf0;
}

3- Após isso, você vai setar no container, o template que você quer para o mosaico usando a propriedade grid-template-areas. Nela você vai basicamente desenhar o layout que você quer, onde cada abertura de aspas e fechamento, é uma linha.



.container {
    display: grid;
    height: 300px;
    grid-template-areas: 
    "item-1 item-2"
    "item-1 item-3"
    "item-1 item-4"
    ;
}

Observe como o layout foi desenhado de acordo com a formatação no grid-template-areas

Só irei fazer mais alguns ajustes de tamanho que quero para minhas colunas usando o grid-template-columns e o gap para gerar um espaçamento entre os elementos ```CSS

.container {
display: grid;
height: 300px;
gap: 15px;
grid-template-columns: 150px 200px;
grid-template-areas:
"item-1 item-2"
"item-1 item-3"
"item-1 item-4"
;
}

O resultado é a criação do nosso layout de forma fácil
![Resultado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luirrp3l6usfqamlzq8v.png)

Um exemplo real de galeria que criei num projeto utilizando essas propriedades

![Exemplo real](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a88un8s7l9ie6jy4codn.png)

E ai, já conhecia essa propriedade com o diplay grid, já utilizava ou vai começar a utilizar a partir de agora?

Maiores informações: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

Qualquer dúvida é só perguntar, e forte abraço!!

Linkedin: https://www.linkedin.com/in/matheus-felizardo
Site Pessoal: https://www.matheusfelizardo.com.br/

Blog

Criando mosaicos facilmente com grid-area e grid-template-area

Matheus Felizardo

Join Our Newsletter. No Spam, Only the good stuff.

Related