{"id":3037,"date":"2025-08-29T10:14:06","date_gmt":"2025-08-29T10:14:06","guid":{"rendered":"https:\/\/www.gammaux.com\/?p=3037"},"modified":"2025-09-04T10:20:12","modified_gmt":"2025-09-04T10:20:12","slug":"types-of-grids-the-evolution-toward-the-4-point-grid-system","status":"publish","type":"post","link":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/","title":{"rendered":"Types of grids: the evolution toward the 4-Point Grid System"},"content":{"rendered":"\n<p>The grid used during the development of responsive interfaces is key to establishing visual coherence and delivering a good user experience. In this way, UI design uses <strong>spacing <\/strong>as a tool <strong>to organize system components attractively and functionally<\/strong>.<\/p>\n\n\n\n<p>When a design is unclear, it is often due to the use of irregular spaces or poorly aligned elements that appear to float or be disconnected. The origin of such inconsistencies usually lies in a poorly applied grid, which <strong>makes it difficult to scale the system and generates friction for the user<\/strong>.<\/p>\n\n\n\n<p>Although every system is unique and it is important to establish a grid that responds to its specific needs, <strong>some standards, such as the 8-Point Grid System<\/strong>, are very common in the digital environment. In this article, we analyze the types of grids that exist and how to make the most of each, finally focusing on the two most used.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is a grid?<\/strong><\/h2>\n\n\n\n<p>The grid is the method that <strong>organizes the visual components<\/strong> of an interface, establishing relationships and hierarchies between them. Using a <strong>network that combines vertical and horizontal lines<\/strong> brings coherence to the design and allows the development of an orderly and smooth user experience. It guides the user\u2019s gaze, <strong>defines reading patterns<\/strong>, and ensures consistency across different devices.<\/p>\n\n\n\n<p>It has a strong influence on the system\u2019s readability, which it regulates through <strong>decisions about spacing, line height<\/strong>, text block size, or the arrangement of different sections, among other aspects. In this way, its implementation facilitates the balance between content areas and empty space, establishing a certain <strong>visual rhythm<\/strong> and influencing the user\u2019s perception.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Que-es-el-grid-1024x516.jpg\" alt=\"\" class=\"wp-image-3023\" srcset=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Que-es-el-grid-1024x516.jpg 1024w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Que-es-el-grid-300x151.jpg 300w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Que-es-el-grid-768x387.jpg 768w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Que-es-el-grid-1536x774.jpg 1536w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Que-es-el-grid.jpg 1872w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><sup>The combination of columns and rows creates a mesh on which interface components are aligned.<\/sup><\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>Types of grids and when to use them<\/strong><\/strong><\/h2>\n\n\n\n<p>There are several types of grids that adapt to different design needs and usage contexts. <strong>The most widespread in the digital environment is the 8-Point Grid System<\/strong>: a choice focused on using multiples of 8 px, offering simplicity and good scalability.<\/p>\n\n\n\n<p>Other formats use grids based on <strong>multiples of 4, 2, or 10 px<\/strong>, or are organized around <strong>line height<\/strong>. They are as follows:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong><strong>Type of grid<\/strong><\/strong><\/td><td><strong>Spacing<\/strong><\/td><td><strong><strong>Performs well in:<\/strong><\/strong><\/td><\/tr><tr><td><strong>8-Point Grid System<\/strong><\/td><td>Multiples of 8 px<\/td><td>Large-scale design systems and cross-platform products. Favors consistency, faster implementation, and responsive adaptation.<\/td><\/tr><tr><td><strong>4-Point Grid System<\/strong><\/td><td>Multiples of 4 px<\/td><td>Environments that require a good balance between detail and scalability. Offers greater typographic control and micro-spacing without losing overall consistency.<\/td><\/tr><tr><td><strong>2-Point Grid System<\/strong><\/td><td>Multiples of 2 px<\/td><td>Precise micro-adjustments in icons, typographic details, and very small elements where minimal misalignment can break visual harmony.<\/td><\/tr><tr><td><strong>10-Point Grid System<\/strong><\/td><td>Multiples of 10 px<\/td><td>Modular interfaces with wide or industrial structures, and projects that prioritize large, clear divisions.<\/td><\/tr><tr><td><strong>Baseline Grid<\/strong><\/td><td>Line height of 4 px, 6 px, or 8 px<\/td><td>Long reading experiences. Provides a constant visual rhythm in text-heavy environments, improving comprehension and reducing visual fatigue.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"260\" src=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Baseline-Grid-1024x260.jpg\" alt=\"\" class=\"wp-image-3025\" srcset=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Baseline-Grid-1024x260.jpg 1024w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Baseline-Grid-300x76.jpg 300w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Baseline-Grid-768x195.jpg 768w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Baseline-Grid-1536x390.jpg 1536w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Baseline-Grid.jpg 1668w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><sup>The Baseline Grid is structured based on text line height, so it is recommended in reading or writing environments.<\/sup><\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>The 8-Point Grid System and the origin of grids<\/strong><\/strong><\/h2>\n\n\n\n<p>The 8-Point Grid System became a standard between 2017 and 2018, thanks to the work of designers like Elliot Dahl and the influence of major companies such as Google and IBM.<\/p>\n\n\n\n<p>Its widespread adoption sped up product development and allowed the creation of more organized interfaces. It facilitated the adoption of responsive design and the generation of reusable components, creating a common language for teams and <strong>laying the foundations of modular design<\/strong>.<\/p>\n\n\n\n<p>However, over time, the 8-Point Grid System proved <strong>too rigid<\/strong> for some situations. This is especially evident during the development of small elements, icons, animations, and text-heavy environments, where font sizes do not always fit into a structure of 8 px multiples.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"782\" height=\"1024\" src=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/descarga-copia-782x1024.png\" alt=\"\" class=\"wp-image-3027\" style=\"width:623px;height:auto\" srcset=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/descarga-copia-782x1024.png 782w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/descarga-copia-229x300.png 229w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/descarga-copia-768x1005.png 768w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/descarga-copia-1174x1536.png 1174w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/descarga-copia.png 1176w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/><figcaption class=\"wp-element-caption\"><sup>All Google products (Gmail, Google Drive, Google Calendar\u2026) use the 8-Point Grid System. Its application is reflected in the Design System, which the company refers to as \u201c<a href=\"https:\/\/m3.material.io\/\">Material Design<\/a>\u201d.<\/sup><\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>The 4-Point Grid System: precision and flexibility<\/strong><\/strong><\/h2>\n\n\n\n<p>Unlike the grid based on multiples of 8 px, the 4-Point Grid System offers a perfect balance between control and adaptability. Using multiples of 4 px allows for <strong>more precise spacing for small components<\/strong>, as well as better alignment between different components.<\/p>\n\n\n\n<p>It provides <strong>an advantage regarding line height and vertical margins<\/strong>, whose adjustments often create jumps and visual inconsistencies. This system <strong>better adapts to the x-height<\/strong> and the optical grid of the font, so it is recommended in editorial environments and interfaces with a lot of text.<\/p>\n\n\n\n<p>It also promotes consistency in layouts that combine text, icons, buttons, and interactive elements. All of this provides unique flexibility in the <strong>development of systems adapted to multiple current platforms<\/strong>, including websites as well as iOS, Android, and wearable device environments.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"636\" src=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Ejemplo-grid-4px-VS-8px-1024x636.jpg\" alt=\"\" class=\"wp-image-3029\" srcset=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Ejemplo-grid-4px-VS-8px-1024x636.jpg 1024w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Ejemplo-grid-4px-VS-8px-300x186.jpg 300w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Ejemplo-grid-4px-VS-8px-768x477.jpg 768w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Ejemplo-grid-4px-VS-8px-1536x954.jpg 1536w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Ejemplo-grid-4px-VS-8px.jpg 1682w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><sup>Visual comparison between design systems based on 4 px and 8 px grids.<\/sup><\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>The 4-Point Grid System: tips and best practices<\/strong><\/strong><\/h2>\n\n\n\n<p>When implementing the 4-Point Grid System, a good practice is to use <strong>low multiples<\/strong> (between 4 px and 16 px) <strong>for component padding<\/strong> and typographic adjustments, reserving higher multiples (24 px to 64 px) for margins between sections and layouts. It is important to keep in mind that <strong>font size will not always be a multiple of 4, but line-height should be<\/strong>, to maintain vertical design consistency.<\/p>\n\n\n\n<p><strong>Defining a spacing token system<\/strong> (for example, spacing-1 = 4 px, spacing-2 = 8 px, spacing-3 = 12 px, etc.) helps design and development teams understand the logic followed by the interface grid. This prior planning avoids arbitrary decisions, facilitates system scalability, and speeds up iterative and handoff processes.<\/p>\n\n\n\n<p>Set a 4 px base grid when designing in platforms like Figma or Sketch and use it as a reference framework for 90% of design decisions. <strong>Including 10% of conscious and justified exceptions<\/strong> helps break potential rigidity while adding naturalness, differentiation, and authenticity to the product or service.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><strong>Want to improve your design structure?<\/strong><\/strong><\/h2>\n\n\n\n<p>We know that the grid is not just an aesthetic issue. It is an essential and strategic decision that impacts design efficiency, development speed, and the quality of the final product.<\/p>\n\n\n\n<p>If you want to work with UI design talent, at GammaUX we have specialists in interface development. Write to us at &#115;&#x75;&#112;&#x70;&#111;&#x72;t&#x40;g&#x61;m&#109;&#x61;&#117;&#x78;&#46;&#x63;&#111;&#x6d; without commitment, and we will analyze how to turn your system into a competitive advantage. Shall we talk?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The grid used during the development of responsive interfaces is key to establishing visual coherence and delivering a good user experience.<\/p>\n","protected":false},"author":2,"featured_media":3036,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[16],"tags":[23],"class_list":["post-3037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-ui-ux-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Types of grids: the evolution toward the 4-Point Grid System - GammaUX<\/title>\n<meta name=\"description\" content=\"The grid used during the development of responsive interfaces is key to establishing visual coherence and delivering a good user experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Types of grids: the evolution toward the 4-Point Grid System - GammaUX\" \/>\n<meta property=\"og:description\" content=\"The grid used during the development of responsive interfaces is key to establishing visual coherence and delivering a good user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/\" \/>\n<meta property=\"og:site_name\" content=\"GammaUX\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-29T10:14:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-04T10:20:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"GammaUX\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@GammaUX\" \/>\n<meta name=\"twitter:site\" content=\"@GammaUX\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"GammaUX\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/\"},\"author\":{\"name\":\"GammaUX\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/abebf11bc486d1ec754a25345f2c0b7a\"},\"headline\":\"Types of grids: the evolution toward the 4-Point Grid System\",\"datePublished\":\"2025-08-29T10:14:06+00:00\",\"dateModified\":\"2025-09-04T10:20:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/\"},\"wordCount\":1033,\"publisher\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg\",\"keywords\":[\"UI &amp; UX design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/\",\"url\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/\",\"name\":\"Types of grids: the evolution toward the 4-Point Grid System - GammaUX\",\"isPartOf\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg\",\"datePublished\":\"2025-08-29T10:14:06+00:00\",\"dateModified\":\"2025-09-04T10:20:12+00:00\",\"description\":\"The grid used during the development of responsive interfaces is key to establishing visual coherence and delivering a good user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#primaryimage\",\"url\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg\",\"contentUrl\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg\",\"width\":2560,\"height\":1280,\"caption\":\"Pantalla de ordenador mostrando wireframes de baja fidelidad para el desarrollo de una interfaz.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.gammaux.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Types of grids: the evolution toward the 4-Point Grid System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#website\",\"url\":\"https:\/\/www.gammaux.com\/en\/\",\"name\":\"GammaUX\",\"description\":\"UX\/UI Consulting and Digital Innovation\",\"publisher\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gammaux.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#organization\",\"name\":\"GammaUX\",\"url\":\"https:\/\/www.gammaux.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2021\/06\/gammaux-black.svg\",\"contentUrl\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2021\/06\/gammaux-black.svg\",\"width\":147,\"height\":18,\"caption\":\"GammaUX\"},\"image\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/GammaUX\",\"https:\/\/www.linkedin.com\/company\/gammaux\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/abebf11bc486d1ec754a25345f2c0b7a\",\"name\":\"GammaUX\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/66ab4d4d83e51cbf8160dc764934ad71c698cd347b774718b2899d55b254896b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/66ab4d4d83e51cbf8160dc764934ad71c698cd347b774718b2899d55b254896b?s=96&d=mm&r=g\",\"caption\":\"GammaUX\"},\"sameAs\":[\"https:\/\/www.gammaux.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Types of grids: the evolution toward the 4-Point Grid System - GammaUX","description":"The grid used during the development of responsive interfaces is key to establishing visual coherence and delivering a good user experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/","og_locale":"en_US","og_type":"article","og_title":"Types of grids: the evolution toward the 4-Point Grid System - GammaUX","og_description":"The grid used during the development of responsive interfaces is key to establishing visual coherence and delivering a good user experience.","og_url":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/","og_site_name":"GammaUX","article_published_time":"2025-08-29T10:14:06+00:00","article_modified_time":"2025-09-04T10:20:12+00:00","og_image":[{"width":2560,"height":1280,"url":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg","type":"image\/jpeg"}],"author":"GammaUX","twitter_card":"summary_large_image","twitter_creator":"@GammaUX","twitter_site":"@GammaUX","twitter_misc":{"Written by":"GammaUX","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#article","isPartOf":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/"},"author":{"name":"GammaUX","@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/abebf11bc486d1ec754a25345f2c0b7a"},"headline":"Types of grids: the evolution toward the 4-Point Grid System","datePublished":"2025-08-29T10:14:06+00:00","dateModified":"2025-09-04T10:20:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/"},"wordCount":1033,"publisher":{"@id":"https:\/\/www.gammaux.com\/en\/#organization"},"image":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg","keywords":["UI &amp; UX design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/","url":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/","name":"Types of grids: the evolution toward the 4-Point Grid System - GammaUX","isPartOf":{"@id":"https:\/\/www.gammaux.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#primaryimage"},"image":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg","datePublished":"2025-08-29T10:14:06+00:00","dateModified":"2025-09-04T10:20:12+00:00","description":"The grid used during the development of responsive interfaces is key to establishing visual coherence and delivering a good user experience.","breadcrumb":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#primaryimage","url":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg","contentUrl":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2025\/09\/Tipos-de-reticula-la-evolucion-hacia-el-4-Point-Grid-System-1-scaled.jpg","width":2560,"height":1280,"caption":"Pantalla de ordenador mostrando wireframes de baja fidelidad para el desarrollo de una interfaz."},{"@type":"BreadcrumbList","@id":"https:\/\/www.gammaux.com\/en\/blog\/types-of-grids-the-evolution-toward-the-4-point-grid-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gammaux.com\/en\/"},{"@type":"ListItem","position":2,"name":"Types of grids: the evolution toward the 4-Point Grid System"}]},{"@type":"WebSite","@id":"https:\/\/www.gammaux.com\/en\/#website","url":"https:\/\/www.gammaux.com\/en\/","name":"GammaUX","description":"UX\/UI Consulting and Digital Innovation","publisher":{"@id":"https:\/\/www.gammaux.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gammaux.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.gammaux.com\/en\/#organization","name":"GammaUX","url":"https:\/\/www.gammaux.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2021\/06\/gammaux-black.svg","contentUrl":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2021\/06\/gammaux-black.svg","width":147,"height":18,"caption":"GammaUX"},"image":{"@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/GammaUX","https:\/\/www.linkedin.com\/company\/gammaux"]},{"@type":"Person","@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/abebf11bc486d1ec754a25345f2c0b7a","name":"GammaUX","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/66ab4d4d83e51cbf8160dc764934ad71c698cd347b774718b2899d55b254896b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/66ab4d4d83e51cbf8160dc764934ad71c698cd347b774718b2899d55b254896b?s=96&d=mm&r=g","caption":"GammaUX"},"sameAs":["https:\/\/www.gammaux.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/posts\/3037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/comments?post=3037"}],"version-history":[{"count":4,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/posts\/3037\/revisions"}],"predecessor-version":[{"id":3041,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/posts\/3037\/revisions\/3041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/media\/3036"}],"wp:attachment":[{"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/media?parent=3037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/categories?post=3037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/tags?post=3037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}