Grid Css: la Unidad Fraccionaria

by Silvia Mazzetta Date: 31-10-2019 css gridcss css3


La unidad fraccionaria (fr) es una nueva forma de medición en CSS, asociada en gran medida a la Grid CSS.

Finjamos que nos olvidamos de la Grid CSS o de las unidades fraccionarias por un momento.
Bien.

Así que son días festivos. En parte es verdad...mañana es fiesta ;-).

Por la ocasión, hemos preparado un pastel gigante y esponjoso.

Pero, tienes que compartirlo con tus invitados, por lo tanto, hay que cortarlo en en 5 partes iguales.

Así que coges el cuchillo y te pones a trabajar...

En 5 minutos, lo tienes : 5 partes iguales.

Buen trabajo!

Justo cuando pensabas que habías hecho un trabajo increíble,viene a visitarte un vecino y naturalmente quiere una parte de pastel. Una porción igual a la de los otros invitados.
¿En serio?
¿Ahora que hacemos?
¿Juntas con cola las otras partes y las atas mágicamente para luego cortarlas otra vez?

No lo creo.

Este es el problema con el que hemos estado viviendo durante mucho tiempo. Al igual que la gran torta esponjosa, tenemos un ancho del 100% en cualquier tipo de pantalla y en varios dispositivos.

Consideramos el siguente código HTML

 
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
 

Disponemos de una sección contenedor que cuenta con 5 divs.
Para compartir el 100% de la anchura en consecuencia y dar a los divs la misma anchura, se puede especificar una anchura individual del 20%.

Por qué?
Porque tenemos 5 divs. 100% dividido entre 5 da 20%.

"...viene a visitarte un vecino y naturalmente quiere una parte de pastel...."

Si se añade un div más dentro de la sección, tendremos que volver a hacer el calculo.

100% dividido por 6.... la matemática queda en tus manos

Este es un problema que la unidad fraccionaria elimina.

 

La unidad fraccionaria

Unidad fraccionaria cssUnidad responsive

Con la unidad fraccionaria(fr) no es necesario recalcular - en absoluto.

Si especifica un ancho de 1fr, puedes añadir tantos elementos hijos cuanto sean necesarios. Los anchos se repartirán por igual entre todos los elementos hijo.

No estás obligado a usar sólo "unos" o "números enteros". Puede que tengas valores como: 1.5fr 3fr 4.5fr.

En este caso, la fracción total es 1.5fr + 3fr + 4.5fr = 9fr

Si el contenedor padre tiene un ancho de 900px....

La primera, (1.5fr) tendrá un ancho de 1.5fr/9fr * 900px. Esto traducido, serían 150px.

El segundo, (3fr) tendrá un ancho de 3fr/9fr * 900px. Traducido serían 300px.

La tercera, (3fr) tendrá un ancho de 4.5fr/9fr * 900px. O bien 450px.

Con las unidades fraccionarias, se introduce mucha flexibilidad. No te pierdas el gusto que supone la maquetación de contenidos con el diseño con el CSS Grid.

 

Resumiendo: para permitir que la cuadrícula/grid ajuste su tamaño de acuerdo al espacio disponible, usamos unidades fraccionarias (fr). El tamaño de una unidad fraccionaria depende tanto del espacio total disponible como del número total de unidades fraccionarias especificado.

Ejemplo:

.container { 
grid-template-columns: 1fr 1fr 40px 20%; 
grid-template-rows: 100px 200px 100px;
}

IMPORTANTE: La unidad fr llena el espacio disponible PERO NUNCA es menor que el tamaño mínimo del contenedor de la cuadrícula.

 
by Silvia Mazzetta Date: 31-10-2019 css gridcss css3 visitas : 1552  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 6 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Artículos relacionados

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

¿Cuál es la diferencia entre Flexbox y Grid?

Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas. Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Guía de Flexbox: las bases

En este artículo aprenderemos a manejar los elementos de nuestra web de una manera más eficiente y eficaz, gracias a la propiedad Flexbox. Pero cuidado, no estamos hablando de una simple…

CSS3: Selectores avanzados y pseudo clases. Descripción, uso y ejemplos

Ya sabemos que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector se define como el código que identifica a uno o varios elementos HTML para…

4 cosas que no sabías sobre Grid CSS

Durante mucho tiempo, el CSS no contenía un gran número de sorpresas. Desarrollándose a un ritmo tranquilo, el lenguaje se conformaba con estilizar sus fuentes y hacer flotar sus divs,…

24 recursos gratuitos para programadores novatos

Cuando estamos descubriendo nuevas áreas, una pequeña ayuda es siempre bien venida. En la programación, los recursos existen en grandes cantidades para ayudar a todos los tipos de desarrolladores. Para…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración