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.

Filas de altura no igual en la cuadrícula de CSS.

28 Jul, 2023 Programación

Estoy intentando mostrar una lista de elementos con contenido diferente en cada elemento, lo que hace que la altura de estos elementos sea diferente.

Necesito 2 columnas verticales con un máximo de 6 elementos por columna.

Sin embargo, esto hace que cada elemento tenga la misma altura que el elemento más alto de la lista, lo cual no quiero.

¿Hay alguna forma de resolver esto?

.container {
   display: grid;
   grid-template-rows: repeat(6, 1fr);
   grid-auto-flow: column;
}

    <ul class="container">
    <li>Item 1</li>
    <li> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum debitis dolorum quod impedit neque explicabo minus odit iusto esse accusantium dignissimos quas atque ab natus, omnis fugit incidunt quos officiis! Libero exercitationem in rem. </li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes usar la propiedad CSS grid-auto-rows. Esta propiedad establece el tamaño de las filas que se crean implícitamente mediante grid-auto-flow. Por defecto, el valor es auto, lo que significa que la altura de cada fila se determinará según el contenido. Sin embargo, puedes establecer un tamaño fijo que se aplicará a todas las filas creadas de manera implícita.

    Por ejemplo, si deseas que cada fila tenga una altura máxima de 100px, puedes agregar lo siguiente a tu clase .container:

    .container {
   display: grid;
   grid-template-rows: repeat(6, 1fr);
   grid-auto-flow: column;
   grid-auto-rows: 100px; /* establece un tamaño fijo para las filas creadas implícitamente */
}

    Esto garantizará que cada fila tenga una altura máxima de 100px, independientemente del contenido. Ten en cuenta que si el contenido de un ítem supera esta altura, se desbordará y se ocultará.

    Puedes ajustar el valor de grid-auto-rows según tu altura máxima deseada. Ten en cuenta que esto se aplicará a todos los ítems en el grid, por lo que si tienes algunos ítems con mucho contenido y otros con muy poco, es posible que desees considerar un diseño diferente que pueda acomodar diferentes alturas.

Comments are closed.