gridcss - grid-template-columns

¿Cómo obtener una grilla de elementos de la lista de igual altura?

Question

Estoy tratando de hacer una grilla de productos usando elementos de lista y inline-block . El problema es que el contenido de los bloques tiene alturas variables y el inline-block no mantiene las alturas iguales.

El código:

#blocks ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

#blocks li {
  display:inline-block;
  vertical-align:top;
  width:280px;
  background-color:#ff9933;
  padding:13px;
  margin: 0px 0px 20px 19px;
}

<div id="blocks">
    <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
    </ul>
</div>

Aquí hay una imagen para ilustrar el problema.

Necesito los bloques para mantener la misma altura de los bloques más grandes, independientemente de su contenido. ¿Es posible hacer algo así?

Y finalmente: Lo siento, el inglés no es mi idioma materno :)

Answer 1

Primero, si ajusta su margen para estar en los 4 lados, se espaciará un poco mejor en el flujo hacia la nueva línea.

En segundo lugar, puede especificar una altura mínima más cercana a algo común para todas las áreas, o ejecutar JavaScript para establecerlas en una línea dada un ancho particular.

Answer 2

No creo que haya una manera, salvo javascript, de hacer esto; Mi recomendación sería establecer una altura definida y tal vez un overflow:auto así que en el caso de que el contenido se desborde no paraliza su sitio y sus lectores aún pueden ver su contenido.

Answer 3

1. Agregar lo siguiente al li CSS imitará el ejemplo de imagen que proporcionó.

    height: 150px;
    min-height: 150px;
    overflow:auto;

2. Además, aquí hay algunos otros enfoques:

• http://demo.smartnetzone.com/same-height-columns-using-jquery/
• http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
• http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 4

Hay un diseño de candidato W3C llamado "flexbox" que se encarga de este problema y muchos otros. Para obtener las casillas de igual altura, simplemente debería asignar la display: flex propiedades display: flex to the UL y display: block to the LIs dentro de ella.

Ejemplo (CodePen)

No va a llegar muy lejos si necesita admitir navegadores más antiguos :) pero si puede evitarlo, este método es fácil y genial.

Referencia: una guía completa para Flexbox

Answer 5

Cuando tenga más divs y, por lo tanto, más filas, sin row-divs (contenedores divs que marcan una fila), el siguiente ejemplo de CSS Tricks hace lo que necesita:

Iguales bloques de altura en filas

El siguiente código tiene ocho elementos de lista. Cuando solo se muestran tres o cuatro elementos por rol, el ejemplo dado hará que todos los divs sean iguales en altura por fila.

<div id="blocks">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>