Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Las cuadrículas Calc () son las mejores cuadrículas

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Andrea J (you can also view the original English article)

Hola. Me llamo Cory. Estoy un poco obsesivo. He sido adicto a los sistemas de cuadrículas durante años. De hecho, ayudé a hacer una muy popular llamada Jeet. Siempre me han encantado las matemáticas relacionadas con el espaciado apropiado de las cosas.

Creo que todos podemos estar de acuerdo en que las cuadrículas fijas han seguido el camino del dinosaurio a favor de las cuadrículas fluidas, pero siempre hubo cosas que me molestaron sobre las cuadrículas fluidas. Por ejemplo, no hay forma de tener una canaleta en la parte superior e inferior del mismo tamaño que una canaleta a la izquierda y a la derecha. En serio, inténtalo.

Y no hay forma de anidar indefinidamente sin pasar algún tipo de contexto junto con tu espacio. Por ejemplo, en Jeet, debes escribir column (1/3 1/2) donde 1/2 es el tamaño del elemento de contención. Esto se vuelve bastante complicado cuando has anidado tres o cuatro veces y tienes declaraciones como column(1/4 1/3 1/2 1/2). Qué asco. No es solo Jeet, cada sistema de cuadrículas basado en un preprocesador tiene este problema.

¿Y Bootstrap? No empieces con la cantidad de elementos adicionales que necesitas en tu marcado solo para hacer que tu sistema de cuadrículas funcione; es propenso a errores si no hay nada más. O el hecho de que necesitas aún más elementos en tu marcado si vas a establecer colores de fondo en los elementos. Aquí hay un ejemplo de ese pequeño problema en forma de galería.

Argh! Incluso Flexbox no parece ofrecer nada nuevo que no sea una forma conveniente de centrar las cosas verticalmente.

Después de ese recorrido sorpresivo de lo que está mal con las cuadrículas hoy, ¿qué se supone que debe hacer un observador de cuadrículas?

Espera, ¿qué es esta cosa brillante? Calc()?

Podemos usar calc() dentro de nuestro CSS, entonces, ¿qué hace?

"Con calc(), puedes realizar cálculos para determinar los valores de la propiedad CSS". - MDN

¡No solo eso, sino que podemos combinar unidades con calc! Eso significa que si queremos que una cuadrícula tenga cuatro columnas por fila con una canaleta de 20 píxeles entre ellas, podemos escribir una combinación de valores de porcentaje y píxeles como width: calc(25% - 20px). ¿Qué tan fantástico es eso?

Ejemplo

Aquí hay un marcado: siete imágenes de gatitos dentro de una section que contiene:

Luego aplicamos un poco de estilo a las imágenes:

Esto asegura que cada imagen tenga exactamente un 25% del ancho de su padre, menos 20px de lo que permite nuestro canal izquierdo y derecho. Un margen de 10 píxeles alrededor coloca la imagen perfectamente centrada dentro de la "columna".

A four-column grid
Cuatro columnas de gatitos

Observa cómo el espacio en la parte superior e inferior es el mismo que el espacio en la izquierda y la derecha. Hermoso.

Expresado de otra manera

Resumamos esto un poco más para aquellos que preferiríamos mostrar el cálculo de manera diferente: width: calc(100% * 1/4 - 20px);

De nuevo, esto nos da cuatro columnas perfectas con una canaleta de 20px. También podemos usar medios de comunicación para alterar el número de columnas según el ancho de la ventana gráfica:

Años de obsesión completamente borrados por esta hermosa y pequeña regla CSS. Dile adiós al sistema de cuadrículas. Hola calc.

Soporte del navegador

No sería justo completar este tutorial rápido sin hacerte saber dónde y cuándo puedes usar calc(). Los sospechosos habituales están jugando a ponerse al día (IE9 ya casi está allí, pero ignora calc() cuando es usado display:table). Sin embargo, mirando hacia adelante, CCS es una herramienta muy poderosa.

Can I Use Calc
Echa un vistazo a http://caniuse.com/#feat=calc para más detalles.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.