El problema con los porcentajes en CSS

No hace mucho, dependíamos completamente del uso de porcentajes para anchos y altos. El uso de porcentajes significaba que su diseño y elementos podían asumir una altura y un ancho en función de la ventana gráfica. Pero a medida que el CSS moderno continúa evolucionando, hemos llegado a un punto en el que incluso podría ser una buena idea evitar el uso de porcentajes.

Conozca los problemas comunes que encontrará al usar porcentajes. Descubra también las técnicas modernas de CSS para usar en lugar de porcentajes. Estas técnicas le darán el mismo resultado que los porcentajes sin ninguno de los inconvenientes.

Un ejemplo de cuadrícula muy simple

Para demostrar un problema con unidades de porcentaje, considere este diseño HTML:

<divisiónclase="envasemi-cuadrícula">
 <divisiónclase="elemento de cuadrícula">
división>
 <divisiónclase="elemento de cuadrícula">
división>
división>

El elemento exterior es un básico.

división elemento contenedor con dos división niños. Cada niño tiene un elemento de cuadrícula clase. Para convertir el contenedor en una cuadrícula con dos columnas (dos cajas), necesitaremos aplicar el siguiente código CSS:

cuerpo {
color de fondo: negro;
alinear elementos: centro;
justificar-contenido: arranque flexible;
}
.mi-red {
mostrar: red;
cuadrícula-plantilla-columnas: 50% 50%;
margen: 3movimiento rápido del ojo;
borde: 2píxelessólidooro;
relleno: 1movimiento rápido del ojo;
}
.grid-elemento {
borde: 3píxelessólidooro;
relleno: 10movimiento rápido del ojo 0;
fondo: azul;
}

Entonces, cada columna (elemento de la cuadrícula) tiene un color de fondo dorado. En la clase principal del contenedor, establecemos cuadrícula-plantilla-columna al 50% para cada columna. Como resultado, ambas cajas ocupan el 50 % del ancho total del elemento contenedor.

Aquí está el resultado:

Pero hay problemas con esta alineación. En primer lugar, si decide agregar un brecha al padre de la cuadrícula, el niño podría desbordarse por el costado. Por ejemplo, si tuviera que agregar brecha: 3px hacia .mi-red bloque en el CSS, así es como se vería el diseño:

Como puede ver en la imagen de arriba, el cuadro de la derecha se ha movido fuera del contenedor. A veces, es posible que no lo note porque su espacio es lo suficientemente pequeño, lo que resulta en un problema de alineación extraño. Pero si tuviera una brecha más grande, entonces la superposición se vuelve bastante obvia.

Cada vez que usa porcentajes y agrega márgenes o espacios, existe una gran posibilidad de experimentar este tipo de errores. Pero, ¿por qué se produce el error?

Es porque cada columna es el 50% del padre. En el ejemplo anterior, tenemos 50 % más 50 % más ese espacio (3 px), que empuja la caja fuera del contenedor.

Tenga en cuenta que este error no solo ocurre con 50-50. Puede configurar la primera columna al 75%, la segunda columna al 25% y el error seguirá ocurriendo. Es por eso que necesita usar la siguiente solución con más frecuencia.

La solución con valores fraccionarios

La solución es utilizar valores fraccionarios en lugar de porcentajes. Entonces, en lugar de configurar la primera columna en 75% y la segunda en 50%, puede configurar la primera columna en 3fr y la segunda columna en 1fr:

cuadrícula-plantilla-columnas: 3es 1es

Esto mantiene la misma proporción que el primer ejemplo. Pero la ventaja de usar es unidades es que están utilizando una fracción del espacio disponible. En este caso, la primera columna ocupará tres partes del espacio mientras que la segunda columna ocupará una parte, sin incluir el espacio.

Otra ventaja de usar frs sobre porcentajes u otros unidades absolutas, como px o em—es que puedes combinarlos con valores fijos. Aquí hay un ejemplo:

columnas de plantilla de cuadrícula: 1fr 10rem;

Con el código anterior, obtendrá un valor fijo que nunca cambia, independientemente del tamaño de la pantalla. Esto se debe a que la columna de la derecha siempre permanecerá en 10 rem mientras que la columna de la izquierda ocupará el espacio restante (menos el espacio).

A veces puedes salirte con la tuya usando porcentajes. Pero debe usarlos de manera inteligente que aún pueda adaptarse a la situación. A menudo, esto significa emparejarlos con un es valor.

Un ejemplo más realista

Imaginemos que tiene una página que comprende el área de contenido principal y un lado (para publicaciones relacionadas). El área de contenido principal ocupa tres fracciones de la pantalla, mientras que el lado ocupa el espacio restante menos el espacio:

.envase {
ancho: 100%;
mostrar: red;
cuadrícula-plantilla-columnas: 3es 1es;
brecha: 1.5rem;
}
.tarjeta {
color de fondo: #5A5A5A;
relleno: 10píxeles;
margen inferior: .5rem;
}

Aquí está el resultado:

Por lo general, movería la barra lateral (o hacia un lado) hacia la parte inferior (o superior) de la página una vez que la pantalla se vuelva demasiado estrecha. Esto significa configurar consultas de medios que apilan todo uno encima del otro cuando la ventana gráfica llega a un punto de interrupción determinado.

Así es como puede apilar todo en una columna cuando la ventana gráfica llega a 55 em o menos:

@medios de comunicación(anchura máxima: 55em) {
.envase {
mostrar: doblar;
dirección de flexión: columna;
 }
}

Y el resultado será algo como esto:

Ahora no desea que cada tarjeta abarque el ancho de toda la ventana gráfica. Más bien, las tarjetas deben mostrarse una al lado de la otra. La mejor manera de lograr esto es con grillas CSS. Pero en lugar de establecer valores de ancho fijos (como 50%) para la columna de plantilla de cuadrícula, use el repetir() funcionar de la siguiente manera:

.sidebar-grid {
mostrar: red;
cuadrícula-plantilla-columnas: repetir(ajuste automático, mínimo máximo(25movimiento rápido del ojo, 1es));
alinear-contenido: comenzar;
brecha: 2movimiento rápido del ojo;
}

Este CSS establece un tamaño mínimo de 25 rem y un tamaño máximo de 1 fr. Ese enfoque es mucho mejor que establecer anchos fijos porque se basa en el tamaño intrínseco. En otras palabras, permite que el navegador resuelva las cosas en función de los parámetros disponibles.

Ahora, cuando reduce la ventana del navegador a un ancho específico, el cuadro de cuadrícula se reajusta automáticamente a dos cuadros por línea.

Cuando la pantalla se vuelve más pequeña, se reduce a un cuadro por línea. Entonces el navegador apila todo uno encima del otro. Todo esto sucede a medida que cambia el tamaño de la ventana. Puede utilizar una función del navegador como Chrome DevTools para entender cómo funciona este CSSy cómo cambiar el tamaño de las ventanas cambia el diseño.

La mejor parte es que no necesita una consulta de contenedor ni nada sofisticado para que el elemento responda. Simplemente configure una cuadrícula y use mínimo máximo() para establecer valores fraccionarios en lugar de tamaños fijos.

Obtenga más información sobre la cuadrícula CSS

Si quiere ser excelente con CSS, debe tener un conocimiento profundo de CSS Grids. Las rejillas pueden ser bastante poderosas cuando se usan bien. Puede lograr casi cualquier diseño que desee utilizando Grids. Esto lo convierte en una herramienta indispensable en CSS.

Una cosa a tener en cuenta al usar cuadrículas CSS es centrarse en la capacidad de respuesta. También puede utilizar el enfoque fraccionario para evitar casos de colisiones entre elementos. Recuerde dominar las cuadrículas CSS porque el estilo de diseño lo ayudará enormemente al crear sitios web.