Primero hay que corregir la declaración del área; deben ser sin puntos y todos entre una misma comillas, quedando asi:
grid-template-areas: 'item1 item2 item3'
Luego hay que agregar una declaración de filas (rows
) del mismo modo que la columna:
grid-template-rows: repeat(2, 1fr)
Luego de esto, al tercer item
se le declara que ocupe una columna completa, y que se ubique como segunda fila.
grid-column: 1/3 /* ocupa una columna de entre los tres ítems */
grid-row: 2/3 /* ocupa la segunda fila de entre los tres ítems */
Éste es la demostración según yo entendí la pregunta:
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
.grid-cards {
display: grid;
gap: .50rem;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas: 'item1 item2 item3';
width: 100%;
height: 100%;
padding: .50rem
}
.item {
width: 100%;
height: 25vh;
margin: auto;
background-color: red;
&:nth-child(1) {
grid-area: item1
}
&:nth-child(2) {
grid-area: item2
}
&:nth-child(3) {
grid-area: item3;
grid-column: 1/3; /* abarca 1 columna de tres items */
grid-row: 2/3; /* abarca la segunda fila de tres items */
}
}
<div class="grid-cards">
<div class="item">Uno</div>
<div class="item">Dos</div>
<div class="item">Tres</div>
</div>
row
), faltaría agregar más declaraciones