Reordenando colunas em um layout de grade CSS

No layout de grade CSS, existem várias técnicas para modificar a ordem das colunas para alcançar layouts específicos. Esta pergunta explora a possibilidade de reorganizar colunas para layouts móveis, como mover uma coluna para baixo enquanto mantém a ordem desejada das colunas em layouts de desktop.

Opções de solução:

1. grid-template-areas: Esta propriedade permite definir áreas nomeadas dentro da grade e então atribuir itens de grade a essas áreas. Ao usar áreas nomeadas, você pode controlar o layout e a ordem dos itens sem depender de sua ordem inicial no código-fonte.
2. Posicionamento baseado em linha: Com o posicionamento baseado em linha, você pode use as propriedades grid-column-* para especificar a coluna na qual um item deve ser colocado. Ao atribuir itens de grade a colunas específicas, você pode controlar sua ordem e posições dentro da grade.
3. order property: A propriedade order permite definir a ordem em que os itens da grade aparecem, independentemente de sua ordenação inicial no código-fonte. Ao especificar valores de ordem, você pode determinar a sequência visual dos itens dentro da grade.
4. função densa de grid-auto-flow: A função densa de grid-auto-flow otimiza o layout da grade ajustando automaticamente o posicionamento dos itens da grade para preencher o espaço disponível da maneira mais eficiente possível. Ele pode ser usado para obter o layout móvel da pergunta, onde os itens são movidos para novas linhas conforme necessário para acomodar o tamanho menor da tela.

Código de exemplo:

O exemplo a seguir demonstra o uso da função grid-auto-flow: densa para obter o layout móvel descrito na pergunta:

.container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-flow: dense; /* optimizes item placement */
}

Com este código, os itens da grade serão automaticamente reorganizados para preencher o espaço disponível de forma eficiente, resultando no layout móvel desejado.