Diseño de cuadrícula CSS: multiplique y conquiste, o cómo diseñar realmente usando The Grid.

Puedes seguirme en Twitter para obtener tutoriales, consejos de JavaScript, etc.

Vamos a diseñar un diseño receptivo utilizando CSS Grid en este tutorial. Y aquí hay una vista panorámica de qué esperar del proceso:

Para tener una buena idea de cómo funciona flex, intente el editor de diseño flex en esta página.

Toda la enchilada. Me gusta publicar contenido de imágenes a vista de pájaro por adelantado para ahorrar tiempo de desplazamiento.

Con dispositivos de mano independientes de la resolución, las cosas se complicaron. Están causando que incluso las reglas de diseño receptivo clásico cambien, IM.

Así que emprendí una búsqueda para estandarizar el diseño receptivo a través de todas las posibilidades de la cuadrícula CSS como si fuera una prueba de coeficiente intelectual ... o algo así ... Y este es mi primer tutorial de la serie sobre cómo hacer diseños reales con la cuadrícula CSS.

Lo que he descubierto sigue.

Ideas básicas detrás de la división de columnas

Traté de averiguar qué ganamos realmente de cada división de columna.

Los diseños de una columna nos ayudan a poner todo nuestro contenido en una larga lista vertical.

Los diseños de dos columnas están bien para las mini galerías de imágenes / portafolios.

Los diseños de columnas de árbol son los primeros de su tipo en ofrecer bordes (márgenes).

Los diseños de cuatro columnas funcionan bien como galerías de imágenes a pantalla completa.

Noté que los diseños de columnas de números impares (≥ 1) funcionan para diseños basados ​​en bordes.

Hmm ¿Qué pasa con el diseño de 5 columnas? Recuerde que las columnas impares a menudo se usan para crear bordes. Porque siempre terminan en 2 lados adicionales.

Los diseños de cinco columnas pueden hacer un formato de artículo bastante decente a medio.

¡Y durante el resto de este tutorial exploraremos hacer uno!

Use unidades fr para hacer que se expandan como lo haría con el margen: auto en elementos regulares. No importa si es 1fr o 2fr o n-fr para bordes, siempre que el contenido primario se especifique utilizando píxeles o un valor grande (r) fr (10fr, 20fr, etc.):

La única diferencia aquí es que Medium usa 1000px para contenido amplio y 700px para la columna del artículo principal. Pero la idea es la misma.

Responsive Grid + Going Mobile

Hasta ahora creamos el andamio principal. Pero, ¿qué pasa con el diseño receptivo?

¡CSS Grid hace las cosas más fáciles de lo que piensas!

Recuerda:

contenido receptivo! = bordes receptivos.

Las dos técnicas deben tratarse por separado. Pero…

A menudo, como en este caso, es posible resolver el problema del contenido receptivo resolviendo el problema del borde receptivo.

Si puedes usar tu creatividad para resolver múltiples problemas usando una técnica ... mucho mejor.

Dicho esto, en este caso, podemos resolverlo simplemente cambiando los carriles exteriores de su plantilla a 0.5fr (los púrpuras y los azules). Y ... también cambiando las áreas del palmo o de la plantilla para expandirlas en múltiples columnas haciendo un amplio espacio de contenido . (El área rosa arriba).

Puede hacerlo a través de consultas de medios o JavaScript.

Finalmente ... cambie el carril principal (verde) a 10fr. (Puede usar un valor similar, pero ≥10 generalmente funcionará bien). Esto escalará automáticamente su carril principal (verde) a la resolución de pantalla actual. Dado que ambos bordes ahora son 0.5fr, todo, incluidos los bordes y el contenido, se escalará correctamente.

Si necesita eliminar completamente los bordes de 0.5fr, puede establecerlos en 0fr. Pero personalmente me gusta tener un pequeño borde en las vistas móviles. Simplemente hace que el carril de contenido se vea mejor en mi opinión.

Yendo móvil

Una vez que se siguen todos los pasos anteriores ... Cuando se aprieta a un espacio más pequeño, debe llegar a algo como esto (arriba).

Lección aprendida aquí?

Siempre trata de encontrar la solución más elegante. Es decir, es limpio, sencillo y, si es posible, resuelve múltiples problemas aplicando un solo cambio (o dos). Esto no es tan difícil como puede parecer.

  • ¿Es esta la única solución? No.
  • ¿Es esta una solución perfecta? No.
  • Pero resuelve el problema y funciona, lo suficiente.

Y es bueno apuntar a eso. El enfoque que se muestra en este tutorial es:

1. Más gratificante y divertido
 2. Es respetable.
 3. Te invita a comprender cómo y por qué algo funciona.
 4. Es simple. Por lo tanto, crea un código fácil de mantener.
 5. Produce código limpio.
 6. Mantiene tu conciencia limpia.

Hablando de eso ... de lo contrario ... podría comenzar a "piratear" el código. (Intenta resolver problemas por prueba y error, a menudo sin entender cómo funciona realmente). Aún así podrás hacer las cosas de esta manera. Y probablemente incluso sienta algún tipo de logro. Pero ... no será divertido.

¿Editor dinámico de artículos como medio?

Por supuesto, en un editor de artículos generado dinámicamente, tendrá que codificar las columnas de contenido amplio para trabajar algorítmicamente. Nunca se sabe qué combinación de texto y contenido amplio querrá utilizar el autor.

Se pueden organizar de cualquier manera. Pero creo que usando JavaScript y unas pocas horas de su tiempo, es posible hacer un editor de artículos generado dinámicamente (como el de Medium) intercambiando áreas de plantilla de cuadrícula como se describió anteriormente.

Todavía puede usar este diseño (por supuesto) para artículos estáticos simples si los está diseñando usted mismo a mano y sabe de antemano qué tipo de contenido va después de qué.

¿Alternativa de cuadrícula no CSS para diseñar artículos de tipo medio?

¿La alternativa sin grilla CSS? Bueno ... no hay mucha diferencia. Quizás más complejo. Todavía es algorítmico, pero terminas usando elementos DIV normales.

Buena suerte con eso .

Creo que la cuadrícula CSS simplifica el proceso sin sacrificar el código limpio.

Miré para mi página de tutorial de Medium. Es un desastre.

Ultimas palabras

Principalmente como programador de JavaScript, nunca he sido bueno en el diseño de sitios web o aplicaciones. Especialmente después de la era receptiva. Pero CSS grid me está inspirando a reconsiderar esta difícil tarea.

Solo necesitaba que me mostraran instrucciones paso a paso y ejemplos de un diseño del mundo real hecho con CSS grid para poder comenzar a hacer el mío.

Pero ... no pude encontrar un solo tutorial en línea que lo demostrara. ¡Así que decidí escribir el mío y compartirlo contigo!

Se trata de tratar de entender las cosas en función de su propósito.

Si pasa tiempo para conocer bien la cuadrícula CSS, es como hacer trampa.

Casi me hace sentir que soy mejor en diseño de diseño de lo que realmente soy.

Tengo que decir que soy adicto a la cuadrícula CSS en este momento y lo usaré de ahora en adelante para crear todos mis diseños futuros.

Espero que estas ideas simples te hayan ayudado a familiarizarte con CSS Grid.

Para más Freemium semanal ...

Puedes seguirme en Twitter para sorteos de PDF en fin de semana.

Sígueme en Instagram para acceder rápidamente a JavaScript.

Puedes seguirme en Facebook para codificar cosas gratis.

Oferta por tiempo limitado

¡Los diagramas en este tutorial fueron influenciados directamente por el manuscrito!

CSS Visual Dictionary 28% de descuento para lectores medianos.

28% de descuento

Solo lectores medianos:

Diccionario visual CSS

== agarrar una copia ==

Contiene todas las propiedades CSS.