{"id":746,"date":"2016-06-16T10:18:06","date_gmt":"2016-06-16T15:18:06","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=746"},"modified":"2017-11-16T12:13:44","modified_gmt":"2017-11-16T18:13:44","slug":"sistema-de-reticulas-para-diseno-web","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/sistema-de-reticulas-para-diseno-web\/","title":{"rendered":"Sistema de ret\u00edculas para dise\u00f1o web"},"content":{"rendered":"

Para dise\u00f1ar p\u00e1ginas web hacemos uso de un recurso tan antiguo como \u00fatil: el sistema de ret\u00edculas. En este art\u00edculo comentamos c\u00f3mo surgi\u00f3 este sistema, sus ventajas y algunos frameworks CSS para ponerlos en pr\u00e1ctica.<\/span><\/p>\n

\"sistema<\/a><\/p>\n

<\/p>\n

Una ret\u00edcula est\u00e1 formada por columnas<\/strong> divididas por un espacio<\/strong> llamado medianil<\/em> (que define si el contenido se ve m\u00e1s compacto o m\u00e1s fluido). Tambi\u00e9n es llamada \u201cgrilla\u201d, grid o cuadr\u00edcula. Sirve para acomodar los elementos de nuestra p\u00e1gina web. <\/span><\/p>\n

\"960-12-col-grid\"<\/a><\/p>\n

Imagen de: <\/span>Sitepoint.com<\/span><\/a><\/p>\n

C\u00f3mo surgi\u00f3<\/span><\/h2>\n

Originalmente los libros se escrib\u00edan a mano. Para facilitar esta enorme tarea, los monjes o escribas ten\u00edan un sistema de ret\u00edculas, que utilizaban para guiarse y dar al libro una estructura consistente a lo largo de la obra, si acaso solo hac\u00edan peque\u00f1os cambios en el tama\u00f1o y color de la fuente.\u00a0<\/span><\/p>\n

\"antiguo<\/a><\/p>\n

Imagen de: <\/span>Arquehistoria.com<\/span><\/a><\/p>\n

Cuando se invent\u00f3 la imprenta se mantuvo la idea de ret\u00edculas, es por eso que las primeras publicaciones tienen el mismo estilo o estructura visual de las publicaciones escritas a mano. <\/span><\/p>\n

\"reticula<\/a><\/p>\n

Imagen de: <\/span>Wikiwand.com<\/span><\/a><\/p>\n

Los primeros dise\u00f1adores formalizaron el sistema de ret\u00edculas y desde entonces los libros, revistas y posters se dise\u00f1an utilizando \u00e9ste sistema. <\/span><\/p>\n

Ventajas<\/span><\/h2>\n

Los sistemas de ret\u00edculas constituyen una respuesta a un problema de dise\u00f1o por complejo que \u00e9ste sea. Algunas de sus ventajas son:<\/span><\/p>\n