DEV Community

Matheus Felizardo
Matheus Felizardo

Posted on

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:
Desenho do layout

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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"
    ;
}
Enter fullscreen mode Exit fullscreen mode

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

  • 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
.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"
    ;
}
Enter fullscreen mode Exit fullscreen mode

O resultado é a criação do nosso layout de forma fácil
Resultado

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

Exemplo real

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/

Discussion (4)

Collapse
developerbishwas profile image
New Linux Helper

wow, you're doing great

Collapse
matheusfelizardo profile image
Matheus Felizardo Author

Thank you!! :D

Collapse
developerbishwas profile image
New Linux Helper

I checked your website, it's kinda cool.

Thread Thread
matheusfelizardo profile image
Matheus Felizardo Author

Thank you, man!! I appreciate it.