es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo colocar DIV anidados en una cuadrícula CSS con alturas variables de fila?

27 Jul, 2023 Programación

Necesito colocar 4 contenedores div en una matriz de 2 por 2. El ancho de las columnas debe ser igual (y por lo tanto fijo), mientras que la altura de las filas debe adaptarse al contenido de las celdas (y por lo tanto variable).

Esto es simple de hacer siempre y cuando la estructura de la marca se vea algo como esto:

<div class="wrapper">
  <div class="cell a1">...</div>
  <div class="cell a2">...</div>
  <div class="cell b1">...</div>
  <div class="cell b2">...</div>
</div>

El CSS correspondiente se vería así:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Desafortunadamente, mi marca (que no puedo cambiar fácilmente) contiene las celdas en una estructura de marca anidada:

<div class="wrapper">
  <div class="container">
    <div class="cell a1">...</div>
    <div class="cell a2">...</div>
  </div>
  <div class="container">
    <div class="cell b1">...</div>
    <div class="cell b2">...</div>
  </div>
</div>

Siempre y cuando la altura de las dos filas pueda ser igual, declarar .container como una cuadrícula secundaria resuelve el problema. Pero como la altura de la fila debe ajustarse según el contenido de la celda, esto no funciona.

¿Hay alguna manera de colocar los cuatro div.cell en la misma cuadrícula definida por div.wrapper, aunque no sean elementos hijos directos?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible ubicar los cuatro div.cell en la misma cuadrícula definida por div.wrapper, aunque no sean elementos secundarios directos. Una forma de hacer esto es utilizando la propiedad grid-area. Podemos asignar un valor único de grid-area a cada uno de los elementos div.cell, luego usar la propiedad grid-template-areas para definir el diseño de la cuadrícula. Aquí tienes un ejemplo de código CSS:

    .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
  "a1 a2"
  "b1 b2";
}

.container {
  display: contents;
}

.cell {
  border: 1px solid black;
}

.cell.a1 {
  grid-area: a1;
}

.cell.a2 {
  grid-area: a2;
}

.cell.b1 {
  grid-area: b1;
}

.cell.b2 {
  grid-area: b2;
}

    En este ejemplo, utilizamos display: contents en los elementos .container para que desaparezcan y permitan que sus hijos (elementos .cell) sean hijos directos de .wrapper. Definimos el diseño de la cuadrícula utilizando grid-template-areas, que corresponde a los valores de grid-area asignados a cada elemento .cell. La propiedad grid-template-rows se establece en auto para alturas de fila variables. Finalmente, asignamos cada elemento .cell a su respectivo grid-area utilizando la propiedad grid-area.

    Con este código CSS, los cuatro elementos div.cell se ubicarán ahora en una cuadrícula de 2 por 2, como se especifica en la propiedad grid-template-areas, aunque estén anidados dentro de elementos .container.

Comments are closed.