0
@media (max-width: 1024px)
.grid-cards
    grid-template-columns: repeat(2, 1fr)
    grid-template-areas: 'item1 item2' '.item3'

.item
    &:nth-child(1)
        grid-area: item1

    &:nth-child(2)
        grid-area: item2

    &:nth-child(3)
        grid-area: item3
        grid-column-start: 2
        grid-column-end: -1

quiero sentrar el item3 ya que solo tengo 3 cards pero cuando paso la tercer card a la segunda fila solo la puedo ubicar a la derecha o a la izquierda, como podria hacer para que unicamente esa quede centrada?

2
  • No se entiende como exactamente debe quedar el tercer item Commented el 16 feb. a las 17:35
  • Si el tercer item debe tomar todo el ancho, como segunda fila (row), faltaría agregar más declaraciones Commented el 16 feb. a las 17:44

1 respuesta 1

0

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.