• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Recursos / Igualar altura de elementos de un grid
Anuncio banner webservi

Igualar altura de elementos de un grid

Igualar altura de elementos de un grid

[ 30 julio 2020 ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

css mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Cómo haces para que todos los elementos de un grid se muestren a la misma altura?, o ¿Porqué se descuadran los elementos del grid cuando ves tu sitio en una tablet?, en este artículo aprenderás las bases que necesitas para corregir esto.

 

Generalidades

Cuando tienes elementos en un grid que tienen diferente cantidad de contenido, y además si el theme que usas no tiene un código CSS adecuado, es muy probable que tengas el problema de que no todos los elementos se mostrarán a la misma altura e incluso algunos podrían descudrarse cuando tienes varias filas.

Altura incorrecta elementos grid

 

Resultado final

Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente imagen:

Altura corregida elementos grid

 

Estructura HTML

La siguiente es la estructura HTML base con la que trabajaremos, consta de un contenedor dentro del cual hay varios ítems, por cada ítem tenemos una imagen un título y un párrafo.

<div class="container">
    <div class="item">
        <img src="https://dummyimage.com/300x200/000000/ffffff.png" >
        <div class="item-text">
            <h3 class="title">1- Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <p>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
    ...
</div>

 

Opción 1 – Usando Float

Esta es la manera que se usaba hasta hace algunos años ya que no existía otra forma; básicamente consiste en que el ítem sea float y darle un determinado ancho en %.

Sin embargo para igualar las alturas necesitamos dar una altura mínima al título y al texto, o en otros casos al contenedor.

.container{
    max-width: 1200px;
    margin: auto;
}
.item{
    float:left; /*Comportamiento flotante de los ítems*/
    padding:10px;
    width:25%; /*Ancho de los ítems*/
    box-sizing: border-box;
}
.item img{
    width:100%;
    height: auto;
}
.item .title{
    min-height: 60px; /*Para igualar columnas fijamos una altura para el título*/
}
.item p{
    min-height: 100px; /*Para igualar columnas fijamos una altura para el párrafo*/
}

 
En caso quieras cambiar a dos columnas para dispositivos móviles simplemente sería cambiar el % de ancho de los ítems:

@media(max-width:768px){
    .item{
        width:50%;
    }
}

 

Opción 2 – Usando Flex

Una opción más moderna es usar la propiedad CSS flex para el contenedor, al final nuestro código quedaría como se muestra a continuación.

.container{
    max-width: 1200px;
    margin: auto;
    display: flex; /*Establecemos la flex al contenedor*/
    flex-wrap: wrap; /*wrap para que los ítems sobrantes se desplacen a otra fila*/
}
.item{
    padding:10px;
    width:25%; /*Establecemos el ancho en % de los ítems*/
    box-sizing: border-box;
}
.item img{
    width:100%;
    height: auto;
}

 
En caso quieras cambiar a dos columnas para dispositivos móviles al igual que en el caso anterior, sería simplemente cambiar el % de ancho de los ítems:

@media(max-width:768px){
    .item{
        width:50%;
    }
}

 

Opción 3 – Usando Grid

Otra de las opciones más recientes y que posiblemente sea la futura implementación de este tipo de estructuras es usar la propiedad CSS grid, al final nuestro código quedaría como se muestra a continuación:

.container{
    max-width: 1200px;
    margin: auto;
    display:grid; /*Establecemos el contenedor a grid*/
    grid-template-columns: repeat(4, 1fr); /*repeat en 4 ya que queremos cuatro columnas y todas del mismo ancho 1fr*/
}
.item{
    padding:10px;
    box-sizing: border-box;
}
.item img{
    width:100%;
    height: auto;
}

 
En caso quieras cambiar a dos columnas para dispositivos móviles tendrás que establecer una repetición de dos elementos:

@media(max-width:768px){
    .container{
        grid-template-columns: repeat(2, 1fr);
    }
}

 

Conclusión

Como has podido comprobar, cuando tengas el problema de que tus elementos se muestran incorrectamente, puedes corregir ese comportamiento a través de las diferentes opciones de CSS.

Recuerda que puedes agregar código CSS como parte del archivo style.css de tu tema hijo.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Leer datos desde otra base de datos en WordPressLeer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPressCrear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPressMostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPressAñadir código de Google Tag Manager sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Métodos alternos para desactivar plugins en WordPress

Desactivar las notificaciones de actualización en WordPress

Ajax en WordPress de manera correcta

Agregar archivos de fuentes tipográficas en WordPress

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad