grid-column grid-row posicionar item CSS
O erro mais comum de quem começa com CSS Grid é confundir "coluna 2" com "linha 2", a numeração do grid não conta colunas, conta as linhas de grade entre elas. Um grid de 3 colunas tem 4 linhas verticais numeradas de 1 a 4, e `grid-column: 1 / 3` significa "da linha 1 até a linha 3", ou seja, as duas primeiras colunas, não a coluna número 3.
Ocupa as duas primeiras colunas e as duas primeiras linhas, um bloco 2x2 no canto superior esquerdo.
Funciona com qualquer número de colunas sem precisar saber o total, porque -1 sempre é a última linha.
Porcentagem calcula sobre a largura total do container. `fr` distribui o espaço que sobra depois de reservar as trilhas de tamanho fixo (px, minmax mínimo), por isso `1fr 200px` deixa a primeira coluna ocupar tudo que não foi usado pelos 200px, algo que porcentagem sozinha não consegue expressar.
Ocupa 2 colunas. O cálculo é sempre linha-final menos linha-inicial: 4 − 2 = 2. É fácil confundir com "colunas de 2 a 4" (que soaria como 3), por isso `span N` costuma evitar esse erro de contagem.
Eles se sobrepõem visualmente, o CSS Grid não impede colisões automaticamente. A ordem no HTML (ou z-index) decide qual fica por cima. Sobreposição intencional é uma técnica válida para efeitos de camadas dentro do grid.
Sim. O CSS Grid cria "trilhas implícitas" automaticamente para acomodar itens posicionados além do grid explícito. O tamanho dessas trilhas extras é controlado por `grid-auto-columns` / `grid-auto-rows`, que por padrão usam `auto`.
Clique em um item para selecioná-lo, arraste para mover ou use a alça no canto para redimensionar.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}O CSS é gerado localmente no navegador.