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 : 6773  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 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

Nuevas unidades de ventana gráfica - CSS

'Intercop 2022' es un proyecto anunciado por Google, Microsoft, Apple y la fundación Mozzilla para que todos los navegadores ofrezcan la misma experiencia web. El proyecto tiene 15 áreas de enfoque…

Container queries: libera el poder de escribir media queries

El diseño web responsivo ha sido una práctica común durante años, permitiendo que los sitios se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla.…

¿Por qué no deberíamos usar el color negro?

A día de hoy es cada vez más frecuente que las páginas cuenten con la opción de ponerlas en modo oscuro, o que directamente basen su estética en los colores…

Utilidades de los selectores :where y :is

Si aún no has oído hablar de estos selectores de pseudoclases, no te preocupes, aquí te explicamos el funcionamiento y dejamos varios usos que nos pueden ser muy útiles a…

Cómo centrar un Div con CSS - 10 formas diferentes

Para los desarrolladores web, a veces centrar un div parece uno de los trabajos más difíciles del mundo. Pues ya no. En este artículo, aprenderás 10 formas diferentes de centrar un…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API CSS Paint: Redondeo de formas parte 2

Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos   Control de los radios   En todos los ejemplos que hemos visto, siempre consideramos un…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4-…

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Clicky