Organizando layouts complexos em React e Next com CSS puro

Quando a gente tenta montar uma interface com componentes que precisam ocupar espaços específicos, como um tabuleiro de xadrez centralizado com painéis ao lado, o desafio é fazer tudo caber bem sem usar JavaScript para ajustar o layout. A resposta da comunidade de frontend tem sido usar container queries e a propriedade aspect-ratio para garantir que o tabuleiro seja sempre quadrado, mas ainda assim a questão de manter o painel ao lado sem espaço vazio fica mais difícil.

A dica é explorar o CSS Grid e as media queries específicas para containers, que têm evoluído bastante. Assim, dá para criar um layout responsivo e sem truques de JS, deixando o CSS fazer o trabalho pesado.

No seu caso, a ideia seria usar grid-template-columns para distribuir o espaço de modo que o painel esquerdo, o tabuleiro e o painel direito fiquem alinhados, ajustando o tamanho do tabuleiro com aspect-ratio: 1 e evitando espaços vazios. Se o painel direito ficar grudado ao tabuleiro, mesmo com tamanhos variáveis, o segredo está em definir grid-template-areas ou usar flexbox com gap: 0, dependendo do contexto. Sem esse critério, a solução pode parecer simples no começo e cara no suporte.

Como vocês têm lidado com esse tipo de layout em projetos de alta responsividade? Alguma dica que funcione bem na prática sem precisar de hacks?