1
resposta

[Dúvida] Duvida sobre Grid

Fiquei em duvida de como funciona o Grid no para saber mais da aula 2, o nome do para saber mais e "Para saber mais: construindo um mapa". O conceito de grid-column eu consegui entender mas o do row eu nao consigo. Se alguem conseguir me dar uma luz eu ficaria agradecido

1 resposta

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.