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

#css #html #webdev #tutorial

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

.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"
    ;
}