[Dúvida] Inverter colunas no grid

Oi, Juliana. Tudo bem?

Sim, é possível inverter as colunas em um layout de grid utilizando a propriedade grid-template-areas ou a propriedade order. Vou te mostrar como fazer isso com um exemplo prático.

Usando grid-template-areas

Primeiro, definimos as áreas do grid e depois atribuímos essas áreas aos elementos.

<div class="container">
  <div class="coluna1">Conteúdo da coluna 1</div>
  <div class="coluna2">Conteúdo da coluna 2</div>
</div>

E no CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "coluna2 coluna1";
}

.coluna1 {
  grid-area: coluna1;
}

.coluna2 {
  grid-area: coluna2;
}

Usando order

Outra forma de fazer isso é utilizando a propriedade order, que permite reordenar os itens dentro do grid. Aqui está um exemplo:

<div class="container">
  <div class="coluna1">Conteúdo da coluna 1</div>
  <div class="coluna2">Conteúdo da coluna 2</div>
</div>

E no CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; /* Espaçamento entre as colunas */
}

.coluna1 {
  background-color: #f0f0f0;
  padding: 20px;
  order: 2; /* A coluna 1 será exibida em segundo */
}

.coluna2 {
  background-color: #d0d0d0;
  padding: 20px;
  order: 1; /* A coluna 2 será exibida em primeiro */
}

Ambas as abordagens funcionam bem, então você pode escolher a que achar mais intuitiva para o seu projeto.

Um abraço e bons estudos.