Problema de estiramiento de items

Hola querida comunidad de EDteam, necesito ayuda con un problema que hace que mis items se estiren más que su contenido, estoy intentando hacer el diseño de suscripciones (pagos mensuales, semestrales y anuales) además que tengo tres items que son los que presentan el nombre del plan, costos y beneficios para el usuario.

Como dije anterior mente, el problema esta que los items que ofrecen los planes se estiran y me crea un scroll en mi página.

Le dejo las evidencias en la parte de abajo XD, espero y las entiendan

Espero sus respuestas y sugerencias :).

8:34 p. m. · 6 dic. 2019

JZ

Joel Zavala Dúran

@joelzavaladuran

Problema de estiramiento de items

Hola querida comunidad de EDteam, necesito ayuda con un problema que hace que mis items se estiren más que su contenido, estoy intentando hacer el diseño de suscripciones (pagos mensuales, semestrales y anuales) además que tengo tres items que son los que presentan el nombre del plan, costos y beneficios para el usuario.

Como dije anterior mente, el problema esta que los items que ofrecen los planes se estiran y me crea un scroll en mi página.

Le dejo las evidencias en la parte de abajo XD, espero y las entiendan

Espero sus respuestas y sugerencias :).

8:34 p. m. · 6 dic. 2019

JZ

Joel Zavala Dúran

@joelzavaladuran

Problema de estiramiento de items

Hola querida comunidad de EDteam, necesito ayuda con un problema que hace que mis items se estiren más que su contenido, estoy intentando hacer el diseño de suscripciones (pagos mensuales, semestrales y anuales) además que tengo tres items que son los que presentan el nombre del plan, costos y beneficios para el usuario.

Como dije anterior mente, el problema esta que los items que ofrecen los planes se estiran y me crea un scroll en mi página.

Le dejo las evidencias en la parte de abajo XD, espero y las entiendan

Espero sus respuestas y sugerencias :).

8:34 p. m. · 6 dic. 2019

JZ

Joel Zavala Dúran

@joelzavaladuran

Problema de estiramiento de items

Hola querida comunidad de EDteam, necesito ayuda con un problema que hace que mis items se estiren más que su contenido, estoy intentando hacer el diseño de suscripciones (pagos mensuales, semestrales y anuales) además que tengo tres items que son los que presentan el nombre del plan, costos y beneficios para el usuario.

Como dije anterior mente, el problema esta que los items que ofrecen los planes se estiran y me crea un scroll en mi página.

Le dejo las evidencias en la parte de abajo XD, espero y las entiendan

Espero sus respuestas y sugerencias :).

8:34 p. m. · 6 dic. 2019

Steveen Echeverri Silva @steveenecheverrisilva6 dic

Pues si se ve que se esta desbordando esos items pero la cuestión es ver el código para saber que causa eso, puede ser un margen. dale overflow-x: hidden; XD o también fíjate en el height. que estas usando para posicionar eso? flex box? yo te recomiendo grid ya que podes hacer grid-template-columns: repeat(3, 1fr); y listo, eso no debe ser algo complicado que te esta causando eso..

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola Steveen Echeverri Silva, agradesco tu pronta respuesta. Te comento que si estoy utilizando grid tal y como tu me dijiste, estuve mirando mi web en firefox y no se genera ese desbordamiento o estiramiento que en google chrome. Tambien esto es lo que me dijo google en la consola :[Deprecation] Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. This change will happen in M70, around October 2018. See https://www.chromestatus.com/feature/6708326821789696 for more details.

De todos modos anexare mi código css y html por si me quieres ayudar :).

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

css: .contenedor_gnrl_exterior { width: 95%; max-width: 1700px;

display: flex;
align-items: center;

}

.planes_ofrecidos { width: 100%; margin-top: 1rem;

display: grid;
grid-template-rows: repeat(2, auto) 100%;
row-gap: 2rem;

}

.title_grl_planes { text-align: center; font-family: 'Yeseva One', cursive; font-weight: none; font-size: 2.5rem; }

.bordes_para_mensual { border-top: 2px solid #b4604e; border-bottom: 2px solid #b4604e; }

.bordes_para_semestral { border-top: 2px solid #9b3928; border-bottom: 2px solid #9b3928; /* border: 2px solid #9b3928; */ }

.bordes_para_anual { border-top: 2px solid #800000; border-bottom: 2px solid #800000; }

.duracion_de_los_planes { width: 100%;

display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
text-align: center;

}

.duracion { margin: .5rem 0; padding: .5rem; border-radius: 3px; font-family: 'Lora', serif; font-size: 1rem; cursor: pointer; }

.duracion_mensual, .duracion_semestral, .duracion_anual { color: white; }

.duracion_mensual { background-color: #b4604e; }

.duracion_semestral { background-color: #9b3928; }

.duracion_anual { background-color: #800000; }

/* ---------------------------------------------------------- / / Planes / / ---------------------------------------------------------- */

.all_planes { width: 100%; /* height: 1000px; */

display: grid;
grid-template: 100% / repeat(3, 1fr);
column-gap: 3rem;

}

.title_plan { width: 100%; text-align: center; font-family: 'Roboto', serif; font-weight: 300; font-size: 1.5rem; border-top-right-radius: 3px; border-top-left-radius: 3px; padding: .5rem; }

.content_main_plan { margin-top: 1rem; padding-top: 1rem; border: 1px solid gainsboro; }

.precios_plan { width: 100%; font-weight: 900; font-family: 'Yeseva One', cursive; font-size: 2rem; /* background-color: ghostwhite; */

display: flex;
justify-content: center;

}

.description_plan { margin-top: 1rem; padding: 1rem; border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; }

.contenido_description_plan { font-family: 'Open Sans', sans-serif; font-size: 14px; /* font-weight: 700; */ color: gray; }

.beneficios_gnrl { padding: 1rem; }

.lista_de_beneficios { list-style: none; font-size: 1rem; font-family: 'Montserrat', sans-serif;

display: grid;
row-gap: .5rem;
/* font-family: &#39;Lato&#39;, sans-serif; */
/* font-family: &#39;Roboto&#39;, sans-serif; */
/* font-weight: 300; */

}

/* ---------------------------------------------------------- / / Relleno / / ---------------------------------------------------------- */

/* ---------------------------------------------------------- / / Extras / / ---------------------------------------------------------- */

.segurity_plan, .protected_plan, .armored_plan{ color: white; }

.segurity_plan { background-color: #717171; }

.protected_plan { background-color: #525252; }

.armored_plan { background-color: #343434; }

.signo_dollar, .precio_int { margin-right: .5rem; }

.signo_dollar, .tipo_moneda { font-family: 'Lora', serif;

font-size: 1rem;

}

.btn_adquirir_plan { margin: 1rem; cursor: pointer; border-radius: 3px; text-align: center; padding: .5rem; font-weight: lighter; color: white; font-family: 'Lora', serif; border: 1px solid #2f4f4f; background-color: #2f4f4f; transition: background-color .5s, color .5s; }

.btn_adquirir_plan:hover { color: white; background-color: #4f6a6a;

transition: background-color .5s,
            color .5s;

}

/-------------------------------------------------------------------------------/ html <div class="contenedor_gnrl_exterior">

&lt;div class=&#34;planes_ofrecidos&#34;&gt;
    &lt;h2 class=&#34;title_grl_planes&#34;&gt;
        Nuestros planes
        😉
    &lt;/h2&gt;

    &lt;!-- Duracion de los planes (Mensuales, Semestrales y Anuales) --&gt;
    &lt;div class=&#34;table_duracion_planes bordes_para_mensual&#34; id=&#34;duracion_de_todos_los_planes&#34;&gt;
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
        &lt;div class=&#34;duracion_de_los_planes&#34;&gt;
            
            &lt;p class=&#34;duracion duracion_mensual&#34; id=&#34;plan_mensual&#34;&gt;
                Mensual
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_semestral&#34;&gt;
                Semestral
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_anual&#34;&gt;
                Anual
            &lt;/p&gt;

        &lt;/div&gt;
        
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
    &lt;/div&gt;

    &lt;!-- Div de todos los planes --&gt;
    &lt;div class=&#34;all_planes&#34;&gt;
        
        &lt;!-- Primer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;

            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan segurity_plan&#34;&gt;
                    Plan SEGURO
                &lt;/h3&gt;
            &lt;/header&gt;

            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
                
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;50&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
                
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan es ideal para comenzar a cuidar y a vigilar tu casa. Cuenta con una
                        amplia capacidad de imagenes con resolución de  hasta 1600 x 1200. Todo esto y
                        mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;

                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            100 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;

                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;

                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;

                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
                    
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;

            &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;

        
        &lt;!-- Fin del primer plan --&gt;
        &lt;/div&gt;

        &lt;!-- Segundo plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan protected_plan&#34;&gt;
                    Plan PROTEGIDO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;70&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan más sofisticado es ideal para ciudades o colónias con un mayor índice
                        de robos. Cuenta con el doble de capacidad de imagenes del plan seguro con resolución
                        de hasta 1600 x 1200. Todo esto y mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            200 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
        
            &lt;!-- Fin del segundo plan --&gt;
        &lt;/div&gt;

        &lt;!-- Tercer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan armored_plan&#34;&gt;
                    Plan BLINDADO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;100&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Con este excelentísimo plan podrás gozar de seguridad todo el día todos
                        los días, ya que un Personal capacitado estará vigilando por si encuentra
                        irregularidades que usted no se llego a enterarse, además que tiene alamacenamiento
                        de fotos ilimitas. Todo esto y mucho más por 1 mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte ilimitado
                            de imágenes
                        &lt;/li&gt;

                        &lt;li&gt;
                            Personal capacitado monitoreando las 24 / 7
                            irregularidades en tu hogar (Esto no afecta tu
                            privacidad)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
            &lt;!-- Fin del tercer plan --&gt;
        &lt;/div&gt;
    
    &lt;!-- Fin de todos los planes --&gt;
    &lt;/div&gt;

&lt;!-- Fin de planes ofrecidos --&gt;
&lt;/div&gt;

</div>

Steveen Echeverri Silva @steveenecheverrisilva7 dic

Joel. lo que te salia en la consola de Chrome era verdad jja estabas usando un porcentaje mal en un grid column, exactamente en esta clase:

.planes_ofrecidos{
width: 100%; margin-top: 1rem;
display: grid;
/*grid-template-rows: repeat(2, auto) 100%;*/ Aquí!
row-gap: 2rem;
}

De todas formas por acá te dejo el link donde más o menos esta como lo debes implementar bien:

https://codepen.io/Stevenses/full/XWJmYoO

Suerte! y saludos

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola nuevamente Steveen Echeverri Silva.

Agradresco muchísimo tu respuesta y tu sugerencia, gracias a ti pude resolver este inconveniente, te mando un saludo y muchas bendiciones :).

JZ

Joel Zavala Dúran

@joelzavaladuran

Problema de estiramiento de items

Hola querida comunidad de EDteam, necesito ayuda con un problema que hace que mis items se estiren más que su contenido, estoy intentando hacer el diseño de suscripciones (pagos mensuales, semestrales y anuales) además que tengo tres items que son los que presentan el nombre del plan, costos y beneficios para el usuario.

Como dije anterior mente, el problema esta que los items que ofrecen los planes se estiran y me crea un scroll en mi página.

Le dejo las evidencias en la parte de abajo XD, espero y las entiendan

Espero sus respuestas y sugerencias :).

8:34 p. m. · 6 dic. 2019

Steveen Echeverri Silva @steveenecheverrisilva6 dic

Pues si se ve que se esta desbordando esos items pero la cuestión es ver el código para saber que causa eso, puede ser un margen. dale overflow-x: hidden; XD o también fíjate en el height. que estas usando para posicionar eso? flex box? yo te recomiendo grid ya que podes hacer grid-template-columns: repeat(3, 1fr); y listo, eso no debe ser algo complicado que te esta causando eso..

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola Steveen Echeverri Silva, agradesco tu pronta respuesta. Te comento que si estoy utilizando grid tal y como tu me dijiste, estuve mirando mi web en firefox y no se genera ese desbordamiento o estiramiento que en google chrome. Tambien esto es lo que me dijo google en la consola :[Deprecation] Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. This change will happen in M70, around October 2018. See https://www.chromestatus.com/feature/6708326821789696 for more details.

De todos modos anexare mi código css y html por si me quieres ayudar :).

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

css: .contenedor_gnrl_exterior { width: 95%; max-width: 1700px;

display: flex;
align-items: center;

}

.planes_ofrecidos { width: 100%; margin-top: 1rem;

display: grid;
grid-template-rows: repeat(2, auto) 100%;
row-gap: 2rem;

}

.title_grl_planes { text-align: center; font-family: 'Yeseva One', cursive; font-weight: none; font-size: 2.5rem; }

.bordes_para_mensual { border-top: 2px solid #b4604e; border-bottom: 2px solid #b4604e; }

.bordes_para_semestral { border-top: 2px solid #9b3928; border-bottom: 2px solid #9b3928; /* border: 2px solid #9b3928; */ }

.bordes_para_anual { border-top: 2px solid #800000; border-bottom: 2px solid #800000; }

.duracion_de_los_planes { width: 100%;

display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
text-align: center;

}

.duracion { margin: .5rem 0; padding: .5rem; border-radius: 3px; font-family: 'Lora', serif; font-size: 1rem; cursor: pointer; }

.duracion_mensual, .duracion_semestral, .duracion_anual { color: white; }

.duracion_mensual { background-color: #b4604e; }

.duracion_semestral { background-color: #9b3928; }

.duracion_anual { background-color: #800000; }

/* ---------------------------------------------------------- / / Planes / / ---------------------------------------------------------- */

.all_planes { width: 100%; /* height: 1000px; */

display: grid;
grid-template: 100% / repeat(3, 1fr);
column-gap: 3rem;

}

.title_plan { width: 100%; text-align: center; font-family: 'Roboto', serif; font-weight: 300; font-size: 1.5rem; border-top-right-radius: 3px; border-top-left-radius: 3px; padding: .5rem; }

.content_main_plan { margin-top: 1rem; padding-top: 1rem; border: 1px solid gainsboro; }

.precios_plan { width: 100%; font-weight: 900; font-family: 'Yeseva One', cursive; font-size: 2rem; /* background-color: ghostwhite; */

display: flex;
justify-content: center;

}

.description_plan { margin-top: 1rem; padding: 1rem; border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; }

.contenido_description_plan { font-family: 'Open Sans', sans-serif; font-size: 14px; /* font-weight: 700; */ color: gray; }

.beneficios_gnrl { padding: 1rem; }

.lista_de_beneficios { list-style: none; font-size: 1rem; font-family: 'Montserrat', sans-serif;

display: grid;
row-gap: .5rem;
/* font-family: &#39;Lato&#39;, sans-serif; */
/* font-family: &#39;Roboto&#39;, sans-serif; */
/* font-weight: 300; */

}

/* ---------------------------------------------------------- / / Relleno / / ---------------------------------------------------------- */

/* ---------------------------------------------------------- / / Extras / / ---------------------------------------------------------- */

.segurity_plan, .protected_plan, .armored_plan{ color: white; }

.segurity_plan { background-color: #717171; }

.protected_plan { background-color: #525252; }

.armored_plan { background-color: #343434; }

.signo_dollar, .precio_int { margin-right: .5rem; }

.signo_dollar, .tipo_moneda { font-family: 'Lora', serif;

font-size: 1rem;

}

.btn_adquirir_plan { margin: 1rem; cursor: pointer; border-radius: 3px; text-align: center; padding: .5rem; font-weight: lighter; color: white; font-family: 'Lora', serif; border: 1px solid #2f4f4f; background-color: #2f4f4f; transition: background-color .5s, color .5s; }

.btn_adquirir_plan:hover { color: white; background-color: #4f6a6a;

transition: background-color .5s,
            color .5s;

}

/-------------------------------------------------------------------------------/ html <div class="contenedor_gnrl_exterior">

&lt;div class=&#34;planes_ofrecidos&#34;&gt;
    &lt;h2 class=&#34;title_grl_planes&#34;&gt;
        Nuestros planes
        😉
    &lt;/h2&gt;

    &lt;!-- Duracion de los planes (Mensuales, Semestrales y Anuales) --&gt;
    &lt;div class=&#34;table_duracion_planes bordes_para_mensual&#34; id=&#34;duracion_de_todos_los_planes&#34;&gt;
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
        &lt;div class=&#34;duracion_de_los_planes&#34;&gt;
            
            &lt;p class=&#34;duracion duracion_mensual&#34; id=&#34;plan_mensual&#34;&gt;
                Mensual
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_semestral&#34;&gt;
                Semestral
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_anual&#34;&gt;
                Anual
            &lt;/p&gt;

        &lt;/div&gt;
        
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
    &lt;/div&gt;

    &lt;!-- Div de todos los planes --&gt;
    &lt;div class=&#34;all_planes&#34;&gt;
        
        &lt;!-- Primer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;

            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan segurity_plan&#34;&gt;
                    Plan SEGURO
                &lt;/h3&gt;
            &lt;/header&gt;

            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
                
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;50&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
                
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan es ideal para comenzar a cuidar y a vigilar tu casa. Cuenta con una
                        amplia capacidad de imagenes con resolución de  hasta 1600 x 1200. Todo esto y
                        mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;

                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            100 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;

                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;

                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;

                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
                    
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;

            &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;

        
        &lt;!-- Fin del primer plan --&gt;
        &lt;/div&gt;

        &lt;!-- Segundo plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan protected_plan&#34;&gt;
                    Plan PROTEGIDO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;70&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan más sofisticado es ideal para ciudades o colónias con un mayor índice
                        de robos. Cuenta con el doble de capacidad de imagenes del plan seguro con resolución
                        de hasta 1600 x 1200. Todo esto y mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            200 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
        
            &lt;!-- Fin del segundo plan --&gt;
        &lt;/div&gt;

        &lt;!-- Tercer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan armored_plan&#34;&gt;
                    Plan BLINDADO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;100&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Con este excelentísimo plan podrás gozar de seguridad todo el día todos
                        los días, ya que un Personal capacitado estará vigilando por si encuentra
                        irregularidades que usted no se llego a enterarse, además que tiene alamacenamiento
                        de fotos ilimitas. Todo esto y mucho más por 1 mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte ilimitado
                            de imágenes
                        &lt;/li&gt;

                        &lt;li&gt;
                            Personal capacitado monitoreando las 24 / 7
                            irregularidades en tu hogar (Esto no afecta tu
                            privacidad)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
            &lt;!-- Fin del tercer plan --&gt;
        &lt;/div&gt;
    
    &lt;!-- Fin de todos los planes --&gt;
    &lt;/div&gt;

&lt;!-- Fin de planes ofrecidos --&gt;
&lt;/div&gt;

</div>

Steveen Echeverri Silva @steveenecheverrisilva7 dic

Joel. lo que te salia en la consola de Chrome era verdad jja estabas usando un porcentaje mal en un grid column, exactamente en esta clase:

.planes_ofrecidos{
width: 100%; margin-top: 1rem;
display: grid;
/*grid-template-rows: repeat(2, auto) 100%;*/ Aquí!
row-gap: 2rem;
}

De todas formas por acá te dejo el link donde más o menos esta como lo debes implementar bien:

https://codepen.io/Stevenses/full/XWJmYoO

Suerte! y saludos

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola nuevamente Steveen Echeverri Silva.

Agradresco muchísimo tu respuesta y tu sugerencia, gracias a ti pude resolver este inconveniente, te mando un saludo y muchas bendiciones :).

JZ

Joel Zavala Dúran

@joelzavaladuran

Problema de estiramiento de items

Hola querida comunidad de EDteam, necesito ayuda con un problema que hace que mis items se estiren más que su contenido, estoy intentando hacer el diseño de suscripciones (pagos mensuales, semestrales y anuales) además que tengo tres items que son los que presentan el nombre del plan, costos y beneficios para el usuario.

Como dije anterior mente, el problema esta que los items que ofrecen los planes se estiran y me crea un scroll en mi página.

Le dejo las evidencias en la parte de abajo XD, espero y las entiendan

Espero sus respuestas y sugerencias :).

8:34 p. m. · 6 dic. 2019

Steveen Echeverri Silva @steveenecheverrisilva6 dic

Pues si se ve que se esta desbordando esos items pero la cuestión es ver el código para saber que causa eso, puede ser un margen. dale overflow-x: hidden; XD o también fíjate en el height. que estas usando para posicionar eso? flex box? yo te recomiendo grid ya que podes hacer grid-template-columns: repeat(3, 1fr); y listo, eso no debe ser algo complicado que te esta causando eso..

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola Steveen Echeverri Silva, agradesco tu pronta respuesta. Te comento que si estoy utilizando grid tal y como tu me dijiste, estuve mirando mi web en firefox y no se genera ese desbordamiento o estiramiento que en google chrome. Tambien esto es lo que me dijo google en la consola :[Deprecation] Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. This change will happen in M70, around October 2018. See https://www.chromestatus.com/feature/6708326821789696 for more details.

De todos modos anexare mi código css y html por si me quieres ayudar :).

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

css: .contenedor_gnrl_exterior { width: 95%; max-width: 1700px;

display: flex;
align-items: center;

}

.planes_ofrecidos { width: 100%; margin-top: 1rem;

display: grid;
grid-template-rows: repeat(2, auto) 100%;
row-gap: 2rem;

}

.title_grl_planes { text-align: center; font-family: 'Yeseva One', cursive; font-weight: none; font-size: 2.5rem; }

.bordes_para_mensual { border-top: 2px solid #b4604e; border-bottom: 2px solid #b4604e; }

.bordes_para_semestral { border-top: 2px solid #9b3928; border-bottom: 2px solid #9b3928; /* border: 2px solid #9b3928; */ }

.bordes_para_anual { border-top: 2px solid #800000; border-bottom: 2px solid #800000; }

.duracion_de_los_planes { width: 100%;

display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
text-align: center;

}

.duracion { margin: .5rem 0; padding: .5rem; border-radius: 3px; font-family: 'Lora', serif; font-size: 1rem; cursor: pointer; }

.duracion_mensual, .duracion_semestral, .duracion_anual { color: white; }

.duracion_mensual { background-color: #b4604e; }

.duracion_semestral { background-color: #9b3928; }

.duracion_anual { background-color: #800000; }

/* ---------------------------------------------------------- / / Planes / / ---------------------------------------------------------- */

.all_planes { width: 100%; /* height: 1000px; */

display: grid;
grid-template: 100% / repeat(3, 1fr);
column-gap: 3rem;

}

.title_plan { width: 100%; text-align: center; font-family: 'Roboto', serif; font-weight: 300; font-size: 1.5rem; border-top-right-radius: 3px; border-top-left-radius: 3px; padding: .5rem; }

.content_main_plan { margin-top: 1rem; padding-top: 1rem; border: 1px solid gainsboro; }

.precios_plan { width: 100%; font-weight: 900; font-family: 'Yeseva One', cursive; font-size: 2rem; /* background-color: ghostwhite; */

display: flex;
justify-content: center;

}

.description_plan { margin-top: 1rem; padding: 1rem; border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; }

.contenido_description_plan { font-family: 'Open Sans', sans-serif; font-size: 14px; /* font-weight: 700; */ color: gray; }

.beneficios_gnrl { padding: 1rem; }

.lista_de_beneficios { list-style: none; font-size: 1rem; font-family: 'Montserrat', sans-serif;

display: grid;
row-gap: .5rem;
/* font-family: &#39;Lato&#39;, sans-serif; */
/* font-family: &#39;Roboto&#39;, sans-serif; */
/* font-weight: 300; */

}

/* ---------------------------------------------------------- / / Relleno / / ---------------------------------------------------------- */

/* ---------------------------------------------------------- / / Extras / / ---------------------------------------------------------- */

.segurity_plan, .protected_plan, .armored_plan{ color: white; }

.segurity_plan { background-color: #717171; }

.protected_plan { background-color: #525252; }

.armored_plan { background-color: #343434; }

.signo_dollar, .precio_int { margin-right: .5rem; }

.signo_dollar, .tipo_moneda { font-family: 'Lora', serif;

font-size: 1rem;

}

.btn_adquirir_plan { margin: 1rem; cursor: pointer; border-radius: 3px; text-align: center; padding: .5rem; font-weight: lighter; color: white; font-family: 'Lora', serif; border: 1px solid #2f4f4f; background-color: #2f4f4f; transition: background-color .5s, color .5s; }

.btn_adquirir_plan:hover { color: white; background-color: #4f6a6a;

transition: background-color .5s,
            color .5s;

}

/-------------------------------------------------------------------------------/ html <div class="contenedor_gnrl_exterior">

&lt;div class=&#34;planes_ofrecidos&#34;&gt;
    &lt;h2 class=&#34;title_grl_planes&#34;&gt;
        Nuestros planes
        😉
    &lt;/h2&gt;

    &lt;!-- Duracion de los planes (Mensuales, Semestrales y Anuales) --&gt;
    &lt;div class=&#34;table_duracion_planes bordes_para_mensual&#34; id=&#34;duracion_de_todos_los_planes&#34;&gt;
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
        &lt;div class=&#34;duracion_de_los_planes&#34;&gt;
            
            &lt;p class=&#34;duracion duracion_mensual&#34; id=&#34;plan_mensual&#34;&gt;
                Mensual
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_semestral&#34;&gt;
                Semestral
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_anual&#34;&gt;
                Anual
            &lt;/p&gt;

        &lt;/div&gt;
        
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
    &lt;/div&gt;

    &lt;!-- Div de todos los planes --&gt;
    &lt;div class=&#34;all_planes&#34;&gt;
        
        &lt;!-- Primer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;

            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan segurity_plan&#34;&gt;
                    Plan SEGURO
                &lt;/h3&gt;
            &lt;/header&gt;

            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
                
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;50&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
                
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan es ideal para comenzar a cuidar y a vigilar tu casa. Cuenta con una
                        amplia capacidad de imagenes con resolución de  hasta 1600 x 1200. Todo esto y
                        mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;

                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            100 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;

                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;

                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;

                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
                    
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;

            &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;

        
        &lt;!-- Fin del primer plan --&gt;
        &lt;/div&gt;

        &lt;!-- Segundo plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan protected_plan&#34;&gt;
                    Plan PROTEGIDO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;70&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan más sofisticado es ideal para ciudades o colónias con un mayor índice
                        de robos. Cuenta con el doble de capacidad de imagenes del plan seguro con resolución
                        de hasta 1600 x 1200. Todo esto y mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            200 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
        
            &lt;!-- Fin del segundo plan --&gt;
        &lt;/div&gt;

        &lt;!-- Tercer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan armored_plan&#34;&gt;
                    Plan BLINDADO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;100&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Con este excelentísimo plan podrás gozar de seguridad todo el día todos
                        los días, ya que un Personal capacitado estará vigilando por si encuentra
                        irregularidades que usted no se llego a enterarse, además que tiene alamacenamiento
                        de fotos ilimitas. Todo esto y mucho más por 1 mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte ilimitado
                            de imágenes
                        &lt;/li&gt;

                        &lt;li&gt;
                            Personal capacitado monitoreando las 24 / 7
                            irregularidades en tu hogar (Esto no afecta tu
                            privacidad)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
            &lt;!-- Fin del tercer plan --&gt;
        &lt;/div&gt;
    
    &lt;!-- Fin de todos los planes --&gt;
    &lt;/div&gt;

&lt;!-- Fin de planes ofrecidos --&gt;
&lt;/div&gt;

</div>

Steveen Echeverri Silva @steveenecheverrisilva7 dic

Joel. lo que te salia en la consola de Chrome era verdad jja estabas usando un porcentaje mal en un grid column, exactamente en esta clase:

.planes_ofrecidos{
width: 100%; margin-top: 1rem;
display: grid;
/*grid-template-rows: repeat(2, auto) 100%;*/ Aquí!
row-gap: 2rem;
}

De todas formas por acá te dejo el link donde más o menos esta como lo debes implementar bien:

https://codepen.io/Stevenses/full/XWJmYoO

Suerte! y saludos

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola nuevamente Steveen Echeverri Silva.

Agradresco muchísimo tu respuesta y tu sugerencia, gracias a ti pude resolver este inconveniente, te mando un saludo y muchas bendiciones :).

Steveen Echeverri Silva @steveenecheverrisilva6 dic

Pues si se ve que se esta desbordando esos items pero la cuestión es ver el código para saber que causa eso, puede ser un margen. dale overflow-x: hidden; XD o también fíjate en el height. que estas usando para posicionar eso? flex box? yo te recomiendo grid ya que podes hacer grid-template-columns: repeat(3, 1fr); y listo, eso no debe ser algo complicado que te esta causando eso..

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola Steveen Echeverri Silva, agradesco tu pronta respuesta. Te comento que si estoy utilizando grid tal y como tu me dijiste, estuve mirando mi web en firefox y no se genera ese desbordamiento o estiramiento que en google chrome. Tambien esto es lo que me dijo google en la consola :[Deprecation] Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. This change will happen in M70, around October 2018. See https://www.chromestatus.com/feature/6708326821789696 for more details.

De todos modos anexare mi código css y html por si me quieres ayudar :).

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

css: .contenedor_gnrl_exterior { width: 95%; max-width: 1700px;

display: flex;
align-items: center;

}

.planes_ofrecidos { width: 100%; margin-top: 1rem;

display: grid;
grid-template-rows: repeat(2, auto) 100%;
row-gap: 2rem;

}

.title_grl_planes { text-align: center; font-family: 'Yeseva One', cursive; font-weight: none; font-size: 2.5rem; }

.bordes_para_mensual { border-top: 2px solid #b4604e; border-bottom: 2px solid #b4604e; }

.bordes_para_semestral { border-top: 2px solid #9b3928; border-bottom: 2px solid #9b3928; /* border: 2px solid #9b3928; */ }

.bordes_para_anual { border-top: 2px solid #800000; border-bottom: 2px solid #800000; }

.duracion_de_los_planes { width: 100%;

display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
text-align: center;

}

.duracion { margin: .5rem 0; padding: .5rem; border-radius: 3px; font-family: 'Lora', serif; font-size: 1rem; cursor: pointer; }

.duracion_mensual, .duracion_semestral, .duracion_anual { color: white; }

.duracion_mensual { background-color: #b4604e; }

.duracion_semestral { background-color: #9b3928; }

.duracion_anual { background-color: #800000; }

/* ---------------------------------------------------------- / / Planes / / ---------------------------------------------------------- */

.all_planes { width: 100%; /* height: 1000px; */

display: grid;
grid-template: 100% / repeat(3, 1fr);
column-gap: 3rem;

}

.title_plan { width: 100%; text-align: center; font-family: 'Roboto', serif; font-weight: 300; font-size: 1.5rem; border-top-right-radius: 3px; border-top-left-radius: 3px; padding: .5rem; }

.content_main_plan { margin-top: 1rem; padding-top: 1rem; border: 1px solid gainsboro; }

.precios_plan { width: 100%; font-weight: 900; font-family: 'Yeseva One', cursive; font-size: 2rem; /* background-color: ghostwhite; */

display: flex;
justify-content: center;

}

.description_plan { margin-top: 1rem; padding: 1rem; border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; }

.contenido_description_plan { font-family: 'Open Sans', sans-serif; font-size: 14px; /* font-weight: 700; */ color: gray; }

.beneficios_gnrl { padding: 1rem; }

.lista_de_beneficios { list-style: none; font-size: 1rem; font-family: 'Montserrat', sans-serif;

display: grid;
row-gap: .5rem;
/* font-family: &#39;Lato&#39;, sans-serif; */
/* font-family: &#39;Roboto&#39;, sans-serif; */
/* font-weight: 300; */

}

/* ---------------------------------------------------------- / / Relleno / / ---------------------------------------------------------- */

/* ---------------------------------------------------------- / / Extras / / ---------------------------------------------------------- */

.segurity_plan, .protected_plan, .armored_plan{ color: white; }

.segurity_plan { background-color: #717171; }

.protected_plan { background-color: #525252; }

.armored_plan { background-color: #343434; }

.signo_dollar, .precio_int { margin-right: .5rem; }

.signo_dollar, .tipo_moneda { font-family: 'Lora', serif;

font-size: 1rem;

}

.btn_adquirir_plan { margin: 1rem; cursor: pointer; border-radius: 3px; text-align: center; padding: .5rem; font-weight: lighter; color: white; font-family: 'Lora', serif; border: 1px solid #2f4f4f; background-color: #2f4f4f; transition: background-color .5s, color .5s; }

.btn_adquirir_plan:hover { color: white; background-color: #4f6a6a;

transition: background-color .5s,
            color .5s;

}

/-------------------------------------------------------------------------------/ html <div class="contenedor_gnrl_exterior">

&lt;div class=&#34;planes_ofrecidos&#34;&gt;
    &lt;h2 class=&#34;title_grl_planes&#34;&gt;
        Nuestros planes
        😉
    &lt;/h2&gt;

    &lt;!-- Duracion de los planes (Mensuales, Semestrales y Anuales) --&gt;
    &lt;div class=&#34;table_duracion_planes bordes_para_mensual&#34; id=&#34;duracion_de_todos_los_planes&#34;&gt;
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
        &lt;div class=&#34;duracion_de_los_planes&#34;&gt;
            
            &lt;p class=&#34;duracion duracion_mensual&#34; id=&#34;plan_mensual&#34;&gt;
                Mensual
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_semestral&#34;&gt;
                Semestral
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_anual&#34;&gt;
                Anual
            &lt;/p&gt;

        &lt;/div&gt;
        
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
    &lt;/div&gt;

    &lt;!-- Div de todos los planes --&gt;
    &lt;div class=&#34;all_planes&#34;&gt;
        
        &lt;!-- Primer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;

            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan segurity_plan&#34;&gt;
                    Plan SEGURO
                &lt;/h3&gt;
            &lt;/header&gt;

            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
                
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;50&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
                
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan es ideal para comenzar a cuidar y a vigilar tu casa. Cuenta con una
                        amplia capacidad de imagenes con resolución de  hasta 1600 x 1200. Todo esto y
                        mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;

                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            100 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;

                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;

                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;

                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
                    
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;

            &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;

        
        &lt;!-- Fin del primer plan --&gt;
        &lt;/div&gt;

        &lt;!-- Segundo plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan protected_plan&#34;&gt;
                    Plan PROTEGIDO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;70&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan más sofisticado es ideal para ciudades o colónias con un mayor índice
                        de robos. Cuenta con el doble de capacidad de imagenes del plan seguro con resolución
                        de hasta 1600 x 1200. Todo esto y mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            200 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
        
            &lt;!-- Fin del segundo plan --&gt;
        &lt;/div&gt;

        &lt;!-- Tercer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan armored_plan&#34;&gt;
                    Plan BLINDADO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;100&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Con este excelentísimo plan podrás gozar de seguridad todo el día todos
                        los días, ya que un Personal capacitado estará vigilando por si encuentra
                        irregularidades que usted no se llego a enterarse, además que tiene alamacenamiento
                        de fotos ilimitas. Todo esto y mucho más por 1 mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte ilimitado
                            de imágenes
                        &lt;/li&gt;

                        &lt;li&gt;
                            Personal capacitado monitoreando las 24 / 7
                            irregularidades en tu hogar (Esto no afecta tu
                            privacidad)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
            &lt;!-- Fin del tercer plan --&gt;
        &lt;/div&gt;
    
    &lt;!-- Fin de todos los planes --&gt;
    &lt;/div&gt;

&lt;!-- Fin de planes ofrecidos --&gt;
&lt;/div&gt;

</div>

Steveen Echeverri Silva @steveenecheverrisilva7 dic

Joel. lo que te salia en la consola de Chrome era verdad jja estabas usando un porcentaje mal en un grid column, exactamente en esta clase:

.planes_ofrecidos{
width: 100%; margin-top: 1rem;
display: grid;
/*grid-template-rows: repeat(2, auto) 100%;*/ Aquí!
row-gap: 2rem;
}

De todas formas por acá te dejo el link donde más o menos esta como lo debes implementar bien:

https://codepen.io/Stevenses/full/XWJmYoO

Suerte! y saludos

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola nuevamente Steveen Echeverri Silva.

Agradresco muchísimo tu respuesta y tu sugerencia, gracias a ti pude resolver este inconveniente, te mando un saludo y muchas bendiciones :).

Steveen Echeverri Silva @steveenecheverrisilva6 dic

Pues si se ve que se esta desbordando esos items pero la cuestión es ver el código para saber que causa eso, puede ser un margen. dale overflow-x: hidden; XD o también fíjate en el height. que estas usando para posicionar eso? flex box? yo te recomiendo grid ya que podes hacer grid-template-columns: repeat(3, 1fr); y listo, eso no debe ser algo complicado que te esta causando eso..

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola Steveen Echeverri Silva, agradesco tu pronta respuesta. Te comento que si estoy utilizando grid tal y como tu me dijiste, estuve mirando mi web en firefox y no se genera ese desbordamiento o estiramiento que en google chrome. Tambien esto es lo que me dijo google en la consola :[Deprecation] Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. This change will happen in M70, around October 2018. See https://www.chromestatus.com/feature/6708326821789696 for more details.

De todos modos anexare mi código css y html por si me quieres ayudar :).

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

css: .contenedor_gnrl_exterior { width: 95%; max-width: 1700px;

display: flex;
align-items: center;

}

.planes_ofrecidos { width: 100%; margin-top: 1rem;

display: grid;
grid-template-rows: repeat(2, auto) 100%;
row-gap: 2rem;

}

.title_grl_planes { text-align: center; font-family: 'Yeseva One', cursive; font-weight: none; font-size: 2.5rem; }

.bordes_para_mensual { border-top: 2px solid #b4604e; border-bottom: 2px solid #b4604e; }

.bordes_para_semestral { border-top: 2px solid #9b3928; border-bottom: 2px solid #9b3928; /* border: 2px solid #9b3928; */ }

.bordes_para_anual { border-top: 2px solid #800000; border-bottom: 2px solid #800000; }

.duracion_de_los_planes { width: 100%;

display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
text-align: center;

}

.duracion { margin: .5rem 0; padding: .5rem; border-radius: 3px; font-family: 'Lora', serif; font-size: 1rem; cursor: pointer; }

.duracion_mensual, .duracion_semestral, .duracion_anual { color: white; }

.duracion_mensual { background-color: #b4604e; }

.duracion_semestral { background-color: #9b3928; }

.duracion_anual { background-color: #800000; }

/* ---------------------------------------------------------- / / Planes / / ---------------------------------------------------------- */

.all_planes { width: 100%; /* height: 1000px; */

display: grid;
grid-template: 100% / repeat(3, 1fr);
column-gap: 3rem;

}

.title_plan { width: 100%; text-align: center; font-family: 'Roboto', serif; font-weight: 300; font-size: 1.5rem; border-top-right-radius: 3px; border-top-left-radius: 3px; padding: .5rem; }

.content_main_plan { margin-top: 1rem; padding-top: 1rem; border: 1px solid gainsboro; }

.precios_plan { width: 100%; font-weight: 900; font-family: 'Yeseva One', cursive; font-size: 2rem; /* background-color: ghostwhite; */

display: flex;
justify-content: center;

}

.description_plan { margin-top: 1rem; padding: 1rem; border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; }

.contenido_description_plan { font-family: 'Open Sans', sans-serif; font-size: 14px; /* font-weight: 700; */ color: gray; }

.beneficios_gnrl { padding: 1rem; }

.lista_de_beneficios { list-style: none; font-size: 1rem; font-family: 'Montserrat', sans-serif;

display: grid;
row-gap: .5rem;
/* font-family: &#39;Lato&#39;, sans-serif; */
/* font-family: &#39;Roboto&#39;, sans-serif; */
/* font-weight: 300; */

}

/* ---------------------------------------------------------- / / Relleno / / ---------------------------------------------------------- */

/* ---------------------------------------------------------- / / Extras / / ---------------------------------------------------------- */

.segurity_plan, .protected_plan, .armored_plan{ color: white; }

.segurity_plan { background-color: #717171; }

.protected_plan { background-color: #525252; }

.armored_plan { background-color: #343434; }

.signo_dollar, .precio_int { margin-right: .5rem; }

.signo_dollar, .tipo_moneda { font-family: 'Lora', serif;

font-size: 1rem;

}

.btn_adquirir_plan { margin: 1rem; cursor: pointer; border-radius: 3px; text-align: center; padding: .5rem; font-weight: lighter; color: white; font-family: 'Lora', serif; border: 1px solid #2f4f4f; background-color: #2f4f4f; transition: background-color .5s, color .5s; }

.btn_adquirir_plan:hover { color: white; background-color: #4f6a6a;

transition: background-color .5s,
            color .5s;

}

/-------------------------------------------------------------------------------/ html <div class="contenedor_gnrl_exterior">

&lt;div class=&#34;planes_ofrecidos&#34;&gt;
    &lt;h2 class=&#34;title_grl_planes&#34;&gt;
        Nuestros planes
        😉
    &lt;/h2&gt;

    &lt;!-- Duracion de los planes (Mensuales, Semestrales y Anuales) --&gt;
    &lt;div class=&#34;table_duracion_planes bordes_para_mensual&#34; id=&#34;duracion_de_todos_los_planes&#34;&gt;
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
        &lt;div class=&#34;duracion_de_los_planes&#34;&gt;
            
            &lt;p class=&#34;duracion duracion_mensual&#34; id=&#34;plan_mensual&#34;&gt;
                Mensual
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_semestral&#34;&gt;
                Semestral
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_anual&#34;&gt;
                Anual
            &lt;/p&gt;

        &lt;/div&gt;
        
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
    &lt;/div&gt;

    &lt;!-- Div de todos los planes --&gt;
    &lt;div class=&#34;all_planes&#34;&gt;
        
        &lt;!-- Primer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;

            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan segurity_plan&#34;&gt;
                    Plan SEGURO
                &lt;/h3&gt;
            &lt;/header&gt;

            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
                
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;50&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
                
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan es ideal para comenzar a cuidar y a vigilar tu casa. Cuenta con una
                        amplia capacidad de imagenes con resolución de  hasta 1600 x 1200. Todo esto y
                        mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;

                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            100 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;

                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;

                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;

                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
                    
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;

            &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;

        
        &lt;!-- Fin del primer plan --&gt;
        &lt;/div&gt;

        &lt;!-- Segundo plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan protected_plan&#34;&gt;
                    Plan PROTEGIDO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;70&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan más sofisticado es ideal para ciudades o colónias con un mayor índice
                        de robos. Cuenta con el doble de capacidad de imagenes del plan seguro con resolución
                        de hasta 1600 x 1200. Todo esto y mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            200 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
        
            &lt;!-- Fin del segundo plan --&gt;
        &lt;/div&gt;

        &lt;!-- Tercer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan armored_plan&#34;&gt;
                    Plan BLINDADO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;100&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Con este excelentísimo plan podrás gozar de seguridad todo el día todos
                        los días, ya que un Personal capacitado estará vigilando por si encuentra
                        irregularidades que usted no se llego a enterarse, además que tiene alamacenamiento
                        de fotos ilimitas. Todo esto y mucho más por 1 mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte ilimitado
                            de imágenes
                        &lt;/li&gt;

                        &lt;li&gt;
                            Personal capacitado monitoreando las 24 / 7
                            irregularidades en tu hogar (Esto no afecta tu
                            privacidad)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
            &lt;!-- Fin del tercer plan --&gt;
        &lt;/div&gt;
    
    &lt;!-- Fin de todos los planes --&gt;
    &lt;/div&gt;

&lt;!-- Fin de planes ofrecidos --&gt;
&lt;/div&gt;

</div>

Steveen Echeverri Silva @steveenecheverrisilva7 dic

Joel. lo que te salia en la consola de Chrome era verdad jja estabas usando un porcentaje mal en un grid column, exactamente en esta clase:

.planes_ofrecidos{
width: 100%; margin-top: 1rem;
display: grid;
/*grid-template-rows: repeat(2, auto) 100%;*/ Aquí!
row-gap: 2rem;
}

De todas formas por acá te dejo el link donde más o menos esta como lo debes implementar bien:

https://codepen.io/Stevenses/full/XWJmYoO

Suerte! y saludos

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola nuevamente Steveen Echeverri Silva.

Agradresco muchísimo tu respuesta y tu sugerencia, gracias a ti pude resolver este inconveniente, te mando un saludo y muchas bendiciones :).

Steveen Echeverri Silva @steveenecheverrisilva6 dic

Pues si se ve que se esta desbordando esos items pero la cuestión es ver el código para saber que causa eso, puede ser un margen. dale overflow-x: hidden; XD o también fíjate en el height. que estas usando para posicionar eso? flex box? yo te recomiendo grid ya que podes hacer grid-template-columns: repeat(3, 1fr); y listo, eso no debe ser algo complicado que te esta causando eso..

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola Steveen Echeverri Silva, agradesco tu pronta respuesta. Te comento que si estoy utilizando grid tal y como tu me dijiste, estuve mirando mi web en firefox y no se genera ese desbordamiento o estiramiento que en google chrome. Tambien esto es lo que me dijo google en la consola :[Deprecation] Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. This change will happen in M70, around October 2018. See https://www.chromestatus.com/feature/6708326821789696 for more details.

De todos modos anexare mi código css y html por si me quieres ayudar :).

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

css: .contenedor_gnrl_exterior { width: 95%; max-width: 1700px;

display: flex;
align-items: center;

}

.planes_ofrecidos { width: 100%; margin-top: 1rem;

display: grid;
grid-template-rows: repeat(2, auto) 100%;
row-gap: 2rem;

}

.title_grl_planes { text-align: center; font-family: 'Yeseva One', cursive; font-weight: none; font-size: 2.5rem; }

.bordes_para_mensual { border-top: 2px solid #b4604e; border-bottom: 2px solid #b4604e; }

.bordes_para_semestral { border-top: 2px solid #9b3928; border-bottom: 2px solid #9b3928; /* border: 2px solid #9b3928; */ }

.bordes_para_anual { border-top: 2px solid #800000; border-bottom: 2px solid #800000; }

.duracion_de_los_planes { width: 100%;

display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
text-align: center;

}

.duracion { margin: .5rem 0; padding: .5rem; border-radius: 3px; font-family: 'Lora', serif; font-size: 1rem; cursor: pointer; }

.duracion_mensual, .duracion_semestral, .duracion_anual { color: white; }

.duracion_mensual { background-color: #b4604e; }

.duracion_semestral { background-color: #9b3928; }

.duracion_anual { background-color: #800000; }

/* ---------------------------------------------------------- / / Planes / / ---------------------------------------------------------- */

.all_planes { width: 100%; /* height: 1000px; */

display: grid;
grid-template: 100% / repeat(3, 1fr);
column-gap: 3rem;

}

.title_plan { width: 100%; text-align: center; font-family: 'Roboto', serif; font-weight: 300; font-size: 1.5rem; border-top-right-radius: 3px; border-top-left-radius: 3px; padding: .5rem; }

.content_main_plan { margin-top: 1rem; padding-top: 1rem; border: 1px solid gainsboro; }

.precios_plan { width: 100%; font-weight: 900; font-family: 'Yeseva One', cursive; font-size: 2rem; /* background-color: ghostwhite; */

display: flex;
justify-content: center;

}

.description_plan { margin-top: 1rem; padding: 1rem; border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; }

.contenido_description_plan { font-family: 'Open Sans', sans-serif; font-size: 14px; /* font-weight: 700; */ color: gray; }

.beneficios_gnrl { padding: 1rem; }

.lista_de_beneficios { list-style: none; font-size: 1rem; font-family: 'Montserrat', sans-serif;

display: grid;
row-gap: .5rem;
/* font-family: &#39;Lato&#39;, sans-serif; */
/* font-family: &#39;Roboto&#39;, sans-serif; */
/* font-weight: 300; */

}

/* ---------------------------------------------------------- / / Relleno / / ---------------------------------------------------------- */

/* ---------------------------------------------------------- / / Extras / / ---------------------------------------------------------- */

.segurity_plan, .protected_plan, .armored_plan{ color: white; }

.segurity_plan { background-color: #717171; }

.protected_plan { background-color: #525252; }

.armored_plan { background-color: #343434; }

.signo_dollar, .precio_int { margin-right: .5rem; }

.signo_dollar, .tipo_moneda { font-family: 'Lora', serif;

font-size: 1rem;

}

.btn_adquirir_plan { margin: 1rem; cursor: pointer; border-radius: 3px; text-align: center; padding: .5rem; font-weight: lighter; color: white; font-family: 'Lora', serif; border: 1px solid #2f4f4f; background-color: #2f4f4f; transition: background-color .5s, color .5s; }

.btn_adquirir_plan:hover { color: white; background-color: #4f6a6a;

transition: background-color .5s,
            color .5s;

}

/-------------------------------------------------------------------------------/ html <div class="contenedor_gnrl_exterior">

&lt;div class=&#34;planes_ofrecidos&#34;&gt;
    &lt;h2 class=&#34;title_grl_planes&#34;&gt;
        Nuestros planes
        😉
    &lt;/h2&gt;

    &lt;!-- Duracion de los planes (Mensuales, Semestrales y Anuales) --&gt;
    &lt;div class=&#34;table_duracion_planes bordes_para_mensual&#34; id=&#34;duracion_de_todos_los_planes&#34;&gt;
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
        &lt;div class=&#34;duracion_de_los_planes&#34;&gt;
            
            &lt;p class=&#34;duracion duracion_mensual&#34; id=&#34;plan_mensual&#34;&gt;
                Mensual
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_semestral&#34;&gt;
                Semestral
            &lt;/p&gt;

            &lt;p class=&#34;duracion&#34; id=&#34;plan_anual&#34;&gt;
                Anual
            &lt;/p&gt;

        &lt;/div&gt;
        
        &lt;!-- &lt;hr class=&#34;hr_mensual&#34;&gt; --&gt;
    &lt;/div&gt;

    &lt;!-- Div de todos los planes --&gt;
    &lt;div class=&#34;all_planes&#34;&gt;
        
        &lt;!-- Primer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;

            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan segurity_plan&#34;&gt;
                    Plan SEGURO
                &lt;/h3&gt;
            &lt;/header&gt;

            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
                
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;50&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
                
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan es ideal para comenzar a cuidar y a vigilar tu casa. Cuenta con una
                        amplia capacidad de imagenes con resolución de  hasta 1600 x 1200. Todo esto y
                        mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;

                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            100 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;

                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;

                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;

                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
                    
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;

            &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;

        
        &lt;!-- Fin del primer plan --&gt;
        &lt;/div&gt;

        &lt;!-- Segundo plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan protected_plan&#34;&gt;
                    Plan PROTEGIDO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;70&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Este plan más sofisticado es ideal para ciudades o colónias con un mayor índice
                        de robos. Cuenta con el doble de capacidad de imagenes del plan seguro con resolución
                        de hasta 1600 x 1200. Todo esto y mucho más por un mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte de hasta
                            200 imágenes con una resolución de 1600
                            x 1200
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
        
            &lt;!-- Fin del segundo plan --&gt;
        &lt;/div&gt;

        &lt;!-- Tercer plan --&gt;
        &lt;div class=&#34;planes&#34;&gt;
        
            &lt;header class=&#34;cabezera_plan&#34;&gt;
                &lt;h3 class=&#34;title_plan armored_plan&#34;&gt;
                    Plan BLINDADO
                &lt;/h3&gt;
            &lt;/header&gt;
        
            &lt;!-- Contenido del plan --&gt;
            &lt;div class=&#34;content_main_plan&#34;&gt;
        
                &lt;div class=&#34;precios_plan&#34;&gt;
                    &lt;span class=&#34;signo_dollar&#34;&gt;$&lt;/span&gt; &lt;span class=&#34;precio_int&#34;&gt;100&lt;/span&gt; &lt;span class=&#34;tipo_moneda&#34;&gt;MXN&lt;/span&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;description_plan&#34;&gt;
                    &lt;p class=&#34;contenido_description_plan&#34;&gt;
                        Con este excelentísimo plan podrás gozar de seguridad todo el día todos
                        los días, ya que un Personal capacitado estará vigilando por si encuentra
                        irregularidades que usted no se llego a enterarse, además que tiene alamacenamiento
                        de fotos ilimitas. Todo esto y mucho más por 1 mes.
                    &lt;/p&gt;
                &lt;/div&gt;
        
                &lt;div class=&#34;beneficios_gnrl&#34;&gt;
                    &lt;ul class=&#34;lista_de_beneficios&#34;&gt;
                        &lt;li&gt;
                            Galería de fotos con soporte ilimitado
                            de imágenes
                        &lt;/li&gt;

                        &lt;li&gt;
                            Personal capacitado monitoreando las 24 / 7
                            irregularidades en tu hogar (Esto no afecta tu
                            privacidad)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Acceso al sistema de notificaciones
                        &lt;/li&gt;

                        &lt;li&gt;
                            Sistema de alertas por múltiples vías
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Monitoreo de múltiples cámaras de vigilancia
                            (Solo las frabricadas por nosotros)
                        &lt;/li&gt;
        
                        &lt;li&gt;
                            Atención al ciente &lt;b&gt;PREMIUM&lt;/b&gt; de Lunes a
                            Viernes de 6:00 A.M a 7:00 P.M (Hora Ciudad
                            de México)
                        &lt;/li&gt;
        
                    &lt;/ul&gt;
                &lt;/div&gt;
        
                &lt;p class=&#34;btn_adquirir_plan&#34;&gt;Adquirir este plan&lt;/p&gt;
        
                &lt;!-- Fin del contenido del plan --&gt;
            &lt;/div&gt;
        
            &lt;!-- Fin del tercer plan --&gt;
        &lt;/div&gt;
    
    &lt;!-- Fin de todos los planes --&gt;
    &lt;/div&gt;

&lt;!-- Fin de planes ofrecidos --&gt;
&lt;/div&gt;

</div>

Steveen Echeverri Silva @steveenecheverrisilva7 dic

Joel. lo que te salia en la consola de Chrome era verdad jja estabas usando un porcentaje mal en un grid column, exactamente en esta clase:

.planes_ofrecidos{
width: 100%; margin-top: 1rem;
display: grid;
/*grid-template-rows: repeat(2, auto) 100%;*/ Aquí!
row-gap: 2rem;
}

De todas formas por acá te dejo el link donde más o menos esta como lo debes implementar bien:

https://codepen.io/Stevenses/full/XWJmYoO

Suerte! y saludos

JZ

Joel Zavala Dúran @joelzavaladuran7 dic

Hola nuevamente Steveen Echeverri Silva.

Agradresco muchísimo tu respuesta y tu sugerencia, gracias a ti pude resolver este inconveniente, te mando un saludo y muchas bendiciones :).

Post

Problema de estiramiento de items

Post

Problema de estiramiento de items

Post

Problema de estiramiento de items

Post

Problema de estiramiento de items

Post

Problema de estiramiento de items

Post

Problema de estiramiento de items