a complexidade e dificuldade de manutenção. Para melhorar essa capacidade de movimentação de elementos dentro do grid, foi criado uma propriedade c...

a complexidade e dificuldade de manutenção. Para melhorar essa capacidade de movimentação de elementos dentro do grid, foi criado uma propriedade chamada grid-template-areas, que nomeia cada espaço do grid criado. Vamos pegar nosso layout normal e tentar nomear baseado no que já temos: .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "verde vermelho vermelho" "verde vermelho vermelho"; } Então no exemplo acima na primeira linha (o primeiro conjunto de aspas): primeiro espaço: bloco verde, segundo espaço: bloco vermelho, terceiro espaço: bloco vermelho ; segunda linha (o segundo conjunto de aspas): primeiro espaço: bloco verde, segundo espaço: bloco vermelho, terceiro espaço: bloco vermelho . Agora só precisamos dizer quem é o bloco vermelho e quem é o bloco verde: .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "verde vermelho vermelho" "verde vermelho vermelho"; } .foto-destaque-verde { background-color: #24cc2d; grid-area: verde; height: 400px; } Antes de colocar nome nos outros blocos, vamos nomear apenas o bloco verde e depois testar. Podemos observar que os elementos continuaram na mesma posição. Agora vamos mudar a posição do bloco verde: .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "vermelho vermelho verde" "vermelho vermelho verde"; } .foto-destaque-verde { background-color: #24cc2d; grid-area: verde; height: 400px; } Mesmo sem nomear os blocos vermelhos com a propriedade grid-area chegamos no nosso objetivo. Neste caso só queremos mudar a posição do bloco verde e queremos que o restante se adapte conforme necessário, então podemos trocar os valores de vermelho para apenas um ponto "." .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: ". . verde" ". . verde"; } .foto-destaque-verde { background-color: #24cc2d; grid-area: verde; height: 400px; } Não podemos deixar espaços vazios que o browser não vai entender, precisamos deixar alguma coisa para indicar o espaço do grid.