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.

¿Estilizando datos grandes – Flex o Grid?

03 Jun, 2023 Programación

Tengo una gran cantidad de datos para estilizar. Viene de cada archivo en lugar de cada tipo y debe ser mostrado en una tabla, aunque debido a HTML está causando problemas. Algunas filas de datos están en blanco y otros se extienden por varias líneas. No puedo usar una tabla porque el contenido se mostraría de forma horizontal en lugar de vertical.

Ver ejemplo
https://jsfiddle.net/r5aj7kse/


.data {
display: flex
}

.dataColumn {
flex-grow: 1;
flex-basis: 0;
}

.dataRow {
border-bottom: 1px solid #000;
padding: 4px;
}

A
B
D

A
A
B
C
D

Necesito que todas las celdas coincidan. He intentado usar flex y la única manera que puedo hacer que funcione es agregando una altura fija a las celdas, pero esto es problemático ya que pierdo muchos datos de esta manera.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en IT especializado en CSS, gridview y flexbox, sugeriría utilizar el diseño de CSS Grid en lugar de Flexbox para resolver este problema. Con CSS Grid, puedes definir filas y columnas y colocar elementos dentro de esas celdas, lo que te ayudará a alinear y distribuir contenido en un formato de cuadrícula o tabla.

    Aquí hay un ejemplo de cómo usar CSS Grid para crear un diseño de tabla para tus datos:

    .data {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* cambia el número de columnas según sea necesario */
  grid-auto-rows: minmax(50px, auto); /* ajusta la altura de la fila en función de tu contenido */
  grid-gap: 4px; /* agrega algo de espacio entre las celdas */
}

.dataRow {
  border-bottom: 1px solid #000;
  padding: 4px;
}

/* Para manejar las celdas vacías, puedes usar la pseudoclase :empty */

.dataColumn:empty {
  display: none; /* oculta las celdas vacías */
}

    Y así es como puedes modificar el código HTML para usar el diseño de CSS Grid:

    <div class="data">
  <div class="dataColumn">
    <div class="dataRow">A</div>
    <div class="dataRow">B</div>
    <div class="dataRow"></div>
    <div class="dataRow">D</div>
  </div>
  <div class="dataColumn">
    <div class="dataRow">A<br>A</div>
    <div class="dataRow">B</div>
    <div class="dataRow">C</div>
    <div class="dataRow">D</div>
  </div>
</div>

    Al usar CSS Grid, puedes ajustar fácilmente el número de columnas y filas, manejar celdas vacías y evitar perder datos debido a alturas fijas.

Comments are closed.