Bom dia.
As imagens mostram o “mapa do grid” para dois breakpoints diferentes (360px e 720px) e indicam exatamente como cada item está posicionado usando grid-row
e grid-column
.
No layout:
- Tela 360px 2 colunas, 3 linhas. Os elementos mudam de posição e tamanho, alguns ocupam mais de uma linha ou coluna.
- Tela 720px 3 colunas, 2 linhas. Há redistribuição para aproveitar melhor o espaço horizontal, com itens se estendendo por mais linhas ou colunas conforme o design.
A ideia é justamente desenhar mentalmente (ou visualmente) o grid antes de codificar, mapeando as linhas e colunas, para depois usar grid-row: X/Y
e grid-column: A/B
no CSS. Isso garante mais controle sobre o layout responsivo.