DEV Community

Matheus Felizardo
Matheus Felizardo

Posted on

3 2

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

Top comments (4)

Collapse
 
developerbishwas profile image
Bishwas Bhandari

wow, you're doing great

Collapse
 
matheusfelizardo profile image
Matheus Felizardo

Thank you!! :D

Collapse
 
developerbishwas profile image
Bishwas Bhandari

I checked your website, it's kinda cool.

Thread Thread
 
matheusfelizardo profile image
Matheus Felizardo

Thank you, man!! I appreciate it.

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay