As propriedades grid-column e grid-row permitem especificar o posicionamento horizontal e vertical dos itens da grade dentro de um layout de grade. Em outras palavras, ambos permitem que você controle onde um item da grade começa e termina referenciando as linhas da grade. Essas linhas da grade são os limites que separam as linhas e colunas que você já definiu usando as propriedades grid-template-rows e grid-template-columns. Vamos dar uma olhada nas sintaxes de grid-row e grid-column e também em um exemplo prático. Aqui está a sintaxe da propriedade grid-row:

grid-row: <start-line> / <end-line>;

E de grid-column:

grid-column: <start-line> / <end-line>;

<start-line> é a linha da grade onde o item começa e <end-line> é a linha da grade onde o item termina. Ambos são indexados a partir de 1, ou seja, você começa a contagem a partir de 1, não de 0. Lembre-se, as linhas da grade para as linhas são geradas com base no número de linhas especificado na propriedade grid-template-rows. O mesmo se aplica às colunas com a propriedade grid-template-columns. Para o exemplo prático, vamos começar com as linhas geradas pelo navegador quando você usa as propriedades grid-template-rows e grid-template-columns. Aqui está um exemplo de grade com 4 colunas e 3 linhas:

<link rel="stylesheet" href="styles.css">
<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  grid-template-rows: repeat(3, 100px); /* 3 equal rows */
  gap: 10px;
}

.grid > div {
  display: grid;
  place-items: center;
  background: crimson;
  color: white;
  font-size: 4rem;
}

Inspecionar o contêiner da grade (a classe grid) mostra que cada linha e coluna é delimitada por duas linhas – uma linha inicial no começo da linha ou coluna e uma linha final no final da linha ou coluna. Você pode direcionar essas linhas para começar a usar as propriedades grid-row e grid-column para determinar onde você deve colocar um item. Aqui está como você pode fazer o primeiro item da grade ocupar as duas primeiras colunas:

<link rel="stylesheet" href="styles.css">
<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  grid-template-rows: repeat(3, 100px); /* 3 equal rows */
  gap: 10px;
}

.grid > div {
  display: grid;
  place-items: center;
  background: crimson;
  color: white;
  font-size: 4rem;
}

.item1 {
  grid-column: 1 / 3;
}

Com isso, você está dizendo que o primeiro item da grade deve começar na coluna 1 e terminar logo antes da coluna 3. O primeiro item agora ocupará duas colunas e o quarto item será movido para a segunda linha. Legal! Se você também quiser que o primeiro item ocupe duas linhas, pode especificar um grid-row de 1 / 3:

<link rel="stylesheet" href="styles.css">
<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  grid-template-rows: repeat(3, 100px); /* 3 equal rows */
  gap: 10px;
}

.grid > div {
  display: grid;
  place-items: center;
  background: crimson;
  color: white;
  font-size: 4rem;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

Você também pode usar a palavra-chave span para informar ao item da grade qual linha e coluna ele deve abranger. Por exemplo, 1 / 3 é o mesmo que 1 / span 2:

<link rel="stylesheet" href="styles.css">
<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  grid-template-rows: repeat(3, 100px); /* 3 equal rows */
  gap: 10px;
}

.grid > div {
  display: grid;
  place-items: center;
  background: crimson;
  color: white;
  font-size: 4rem;
}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

Você pode continuar a aplicar essa técnica a qualquer item na grade e colocá-los onde quiser.  Continuando o processo, aqui está como fizemos um layout de alvenaria com os itens. Este é um novo exemplo:

<link rel="stylesheet" href="styles.css">
<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  grid-template-rows: repeat(4, 100px); /* 4 equal rows */
  gap: 10px;
}

.grid > div {
  display: grid;
  place-items: center;
  background: crimson;
  color: white;
  font-size: 4rem;
}

.item1 {
  grid-column: 1 / span 2;
}

.item4 {
  grid-column: 1 / span 3;
}

.item6 {
  grid-column: 1 / span 2;
}

.item7 {
  grid-column: 3 / span 2;
}