¿Odias los marcos de cuadrícula de CSS pero te encantan los rápidos beneficios de diseño que ofrecen? ¿Tiene problemas con las matemáticas y el código necesarios para crear sus propios diseños flexibles de varias columnas sobre la marcha?
Hoy lo guiaremos a través de la creación de su propio sistema básico y reutilizable para crear múltiples columnas que puede implementar en cualquier lugar en cualquier momento con solo unas pocas líneas de código. No se requiere código abultado o nombres de clase no semáticos!
Grid Frameworks: Pros y Contras
Soy un gran fanático de los marcos de cuadrícula CSS. Me encanta descargarlos, abrirlos y ver cómo funcionan. He escrito sobre casi todas las buenas que puedo encontrar aquí en Design Shack y es probable que continúe haciéndolo en el futuro.
El beneficio de los marcos de cuadrícula es una obviedad: hacen un diseño rápido y ridículo. Si tiene en mente un diseño bastante sencillo para su sitio, puede hacerlo sin esfuerzo y dedicar más tiempo a enriquecer su diseño que a esforzarse por hacer que sus columnas funcionen.
Sin embargo, los marcos de cuadrícula de CSS también tienen algunas desventajas bastante serias. Para empezar, muchos de ellos son bastante pesados y van mucho más allá de las clases de diseño simple, mientras buscan un estilo extensivo de cada elemento HTML predeterminado que el mundo haya visto, sin importar cuán oscuro sea. Este problema de tamaño puede tender a hacer que los marcos sean difíciles de envolver.
Los marcos de cuadrícula también son bastante fijos. Tienes que jugar por sus reglas o terminas rompiendo todo. La personalización del código a su gusto puede ser un proceso largo y doloroso, que frustra la idea de ahorrar tiempo.
¡Finalmente, muchos programadores son verdaderos manipuladores para el código semántico y la configuración de clases genéricas y con nombres oscuros para el diseño realmente los frustra sin fin!
Construye tu propio
Como hemos establecido claramente, a algunas personas les encantan los marcos de cuadrícula de CSS, y muchas las odian. Este artículo está dirigido a los codificadores que están en algún lugar entre los dos. Le gustan los beneficios que obtiene, como el diseño rápido de varias columnas, pero no está convencido de que estas cosas realmente valgan la pena.
Esto es especialmente cierto para aquellos que construyen una página web bastante simple. Claro, sería bueno tener alguna ayuda con el diseño, pero traer un marco completo para una sola página es como traer una retroexcavadora para plantar un árbol joven.
Para este tipo de proyectos, puede ser mejor abandonar por completo los marcos de cuadrícula. Sin embargo, puede que todavía nos cueste tener algún tipo de sistema en el lugar para eliminar varias columnas sobre la marcha.
El objetivo aquí es configurar un sistema reutilizable que pueda implementar para lograr diseños complicados de varias columnas. El sistema debe ser conciso y no sufrir código inflado. No debería requerir una gran lista de clases no semánticas, muchas de las cuales nunca puede usar. También debe ser flexible y ceder a su voluntad con cada proyecto en lugar de retroceder en una esquina. Si cambia de opinión y altera repentinamente todo el ancho del sitio, nuestra cuadrícula debería reaparecer con cero problemas. Finalmente, la implementación debe ser rápida e indolora.
Creando Columnas en CSS
Si recién está comenzando con el diseño CSS, crear un diseño de varias columnas puede ser un poco intimidante. Obviamente, si no fuera fácil, no tendríamos tantos marcos que busquen simplificar el proceso.
Digamos que quieres configurar cuatro columnas. Primero tienes que tener en cuenta tu anchura. Digamos que tienes un contenedor de 900px de ancho. Si divide 900px por cuatro columnas, obtendrá 225px por columna. ¡Bastante simple! Sin embargo, estas columnas se estrellarán unas contra otras, necesitamos algunos márgenes. Desafortunadamente, los márgenes destrozarán nuestro diseño y expandirán nuestras columnas más allá del ancho principal.
Lo que debemos hacer entonces es calcular la cantidad total de espacio necesario para los márgenes. Digamos que queremos que la primera, segunda y tercera columna tengan una margen derecho de tres píxeles. Tres píxeles por tres columnas equivalen a nueve píxeles por márgenes. Ahora simplemente tomamos nueve de nuestro ancho (900 - 9 = 891) y luego dividimos por cuatro columnas para obtener 222.75px para cada una de las cuatro columnas.
Eh
Esto obviamente involucró un poco de matemáticas de nuestra parte. No es exactamente algo de nivel universitario, pero tampoco es divertido hacer esto cada vez que necesitamos algunas columnas (las matemáticas también son bastante feas). Además, tan pronto como cambiemos el ancho total de nuestro contenedor, ¡todo esto se rompe y tenemos que empezar de nuevo!
Entonces, ¿cómo lo hacemos para que cuando los padres cambien, los niños los sigan?
Usa porcentajes en lugar de
Los valores de píxeles son específicos de cada caso y demasiado precisos para usarlos en algo que queremos que sea reciclable. Si sustituimos porcentajes, nuestras matemáticas se vuelven más fáciles y nuestra cuadrícula será lo suficientemente inteligente como para adaptarse a un contenedor principal cambiante. Esencialmente, estaremos construyendo una red fluida.
Crear una calculadora de cuadrícula
¡Si queremos una implementación rápida, no podemos pensar en todas estas complicadas matemáticas cada vez! En lugar de ejecutar todos estos números en nuestras cabezas, configuremos una herramienta para hacer todo el trabajo por nosotros. Es bastante simple con una herramienta llamada Instacalc.
Instacalc es prácticamente una calculadora elegante con algunas capacidades menores de hoja de cálculo. Lo que obtenemos aquí es la capacidad de configurar fórmulas reutilizables para descubrir nuestro sistema de columnas. Solo tiene que hacer esto una vez que tenga cuidado, una vez que lo configuramos la primera vez, puede guardar la calculadora y volver cuando lo necesite.
Aquí está la configuración que utilicé. El primer campo requiere que ingrese el número de columnas y el segundo solicita un valor de margen (esto será en porcentaje). El resto está automatizado para darle los resultados que necesita.El tercer campo calcula su margen total y el cuarto le indica el ancho de columna que necesita.
Si no quieres configurar esto, ¡no te molestes! Solo usa el mío. Con esto en su lugar, podemos calcular fácilmente los anchos necesarios para el diseño de cuatro columnas que intentamos arriba.
Ahora, si queremos cambiar a un diseño de tres columnas, todo lo que tenemos que hacer es escribir? 3? En el primer campo de nuestra calculadora. El resto está a cargo de nosotros. Esto elimina todo el trabajo de descifrar diseños de varias columnas. Simplemente ingrese un número para sus columnas y un número para su margen y obtendrá todo lo que necesita. A veces, como resultado, obtienes algunos números descuidados, pero honestamente he encontrado que no hay absolutamente ningún problema con la configuración de los anchos de tus columnas en? 30.667% ?.
¡Constrúyelo!
Basta de teoría, vamos a construir este lechón. Todas las cosas anteriores suenan como un montón de trabajo, pero, honestamente, ¡es mucho más trabajo explicarlo que construirlo!
Digamos que queremos cuatro columnas de texto que expliquen cuatro características en nuestro sitio web. El HTML para esto es bastante sencillo, solo crea un contenedor para la sección en su totalidad y un div para cada columna. También lancé un? Último? clase en la última columna para ayudarnos a borrar el margen.
Ahora para el CSS. Primero, establecemos un ancho en la envoltura y configuramos el rebosar a oculto. A continuación, simplemente diseñamos la clase de características con las matemáticas que escupe nuestra calculadora. Es importante tener en cuenta una vez más que dado que ya tenemos esta calculadora configurada, no tenemos que ejecutar un solo cálculo en nuestras cabezas. Solo ingrese los valores y tome lo que la calculadora nos da.
¿Ves que pequeño es el código? En lugar de un marco gigantesco, tenemos algunas declaraciones simples que cualquiera puede leer. El resultado es un pequeño y agradable diseño de cuatro columnas que se ajusta perfectamente a cualquier escenario.
Desde aquí podemos cambiar nuestro ancho a lo que queramos y la cuadrícula se arreglará sola. ¿Quieres cambiar a 960px de ancho? Simplemente cambia el ancho de la envoltura.
Si desea una grilla fluida agradable, cambie el ancho de la envoltura a un porcentaje. Ahora a medida que ajusta el tamaño del navegador, sus columnas se ajustarán automáticamente.
Combinando columnas
Los inteligentes entre ustedes ya están diciendo "no tan rápido". El problema que hemos encontrado aquí es que todas nuestras columnas deben tener el mismo ancho. Por ejemplo, ¿qué sucede si queremos combinar las dos últimas columnas de nuestro diseño en una columna ancha?
Todo lo que tenemos que hacer para esto es configurar una fórmula en Instacalc que combine dos columnas y elimine el margen de una de ellas. Como el resto, esto es algo que solo puedes usar una y otra vez. Aquí hice una fórmula para combinar dos columnas y una para combinar tres.
El código
El HTML para esto es exactamente igual que la última vez, solo tenemos tres columnas en lugar de cuatro.
Una vez más, simplemente conectamos los números de nuestra calculadora y obtenemos una buena y concisa parte de CSS que cumple exactamente con lo que necesitamos.
Aquí está el diseño resultante con la última columna dos veces más ancha que las dos primeras. Con este método, puede dividir y cortar una combinación infinita de diferentes anchos que puede aplicar en todas las diferentes secciones de su sitio.
Juega con ello
Definitivamente te animo a saltar a este código y ensuciarte las manos. He creado un área de juegos en vivo en JSFiddle para que veas estos ejemplos en vivo y los edites a tu gusto.
Haga clic aquí para lanzar la demo
Conclusión
Tuvimos varios objetivos diferentes cuando comenzamos este proyecto. Nos propusimos construir un sistema de cuadrícula básico que sea lo suficientemente flexible como para implementarlo en un contenedor de cualquier ancho, incluso si ese contenedor cambia de tamaño. El CSS tenía que ser extremadamente breve y permitir la denominación de clase semántica. Finalmente, la implementación tenía que ser rápida.
Aunque definitivamente es un poco complicado envolver la cabeza al principio, nuestro sistema cumple todos estos objetivos. Puedes argumentar que hay demasiados cálculos matemáticos para que sea fácil, pero en verdad te he dado las fórmulas y la calculadora guardada que necesitas. El único trabajo necesario de su parte es ingresar dos números cada vez que desee crear un nuevo diseño.
Este artículo no es de ninguna manera una recomendación de que siempre debe utilizar este sistema para crear diseños de varias columnas. Es simplemente un intento de mostrarle que no tiene que depender del marco complicado e inflado de otra persona. Con un poco de configuración e ingenio, los diseños de varias columnas se pueden lograr según sea necesario con muy poco esfuerzo.