Allow me to kick off this Design Series with our grid system — the building blocks. This is the scale that will be used to make a lot of layout decisions, keep a coherent look throughout the app, and make implementation more simple. I started with the simplest thing, the unit, and for that I followed the rules of the **8-Point Grid.** Here’s the basic principle, [from the Spec FM folks](https://spec.fm/specifics/8-pt-grid): > Use multiples of 8 to define dimensions, padding, and margin of both block and inline elements. I didn’t stop there. For proportions I decided to go with the Golden Ratio (1.618) model and define the standard sizes for all our elements when possible. This means that I take that proportion and round it up to the nearest multiple of 8. This is what it looks like: ![Our building blocks](/v3/img/blog/d1f36b20-8672-11e6-837c-c94c57850b4b.png) In practice, for every element you should give it a margin of either 8/16/24/40/64/… for example. This gives the app a consistent look and feel, and makes it easier to add new elements and components. By adding these dimensions to our app as variables, we can make sure that everything stays proportionally sane across elements. It also makes it easier to communicate and translate static mockups to code, since it’s pretty easy to identify just by looking at a PNG, if something falls in the 8pt, or 16pt, etc… ``` /* Dimensions */--micro: 8px;--tiny: 16px;--small: 24px;--medium: 40px;--large: 64px;--xl: 104px;--xxl: 168px;--3xl: 264px;--4xl: 424px;--5xl: 680px;--6xl: 1088px; ``` ## Simplify your design work Setting up these constraints was actually liberating and made my life as a designer more simple. However, in order for this to work, **you have to trust the system**. Trust the system and you’ll stop fighting the limitations. See them as a fabric of logic and structure throughout your work. Trust the process. After the whole team was on board with the basic grid, it was time to start mocking things up. We currently use [Sketch](https://www.sketchapp.com) as our main design tool, so the first thing I did was translating this grid to it. Pretty simple thing to do, just navigate to View → Canvas → Grid settings… and set up your Grid block size as 8px. I personally like to remove the thick lines at every X and change the color of the grid — but that’s just me. ![grid settings in Sketch](/v3/img/blog/grid-settings.png) Another useful app that you can install is [Nudge.it](http://nudg.it). Nudge.it allows you to change the value of the **big nudge** (hitting _CMD + Arrow Key_ on your keyboard) from 10 points, to any value that you want — in this case, 8 points! With that, you’re pretty much all set. !\[Deploy Card with grid\](/v3/img/blog/grid deploy card.png) !\[Site with Grid\](/v3/img/blog/grid site’s cell.png) Here’s an example of our **Sites page** with these dimensions highlighted. ![Screenshot with Grid and paddings overlay](/v3/img/blog/demo.png) * * * We will be sharing a lot more about the process in future installments, like **Designing in components**, so keep an eye out here on the blog or [follow us on Twitter](http://twitter.com/netlify) for all the updates. ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=A 2.0 Grid System&url=https://www.netlify.com/blog/2017/03/23/a-2.0-grid-system//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2017%2F03%2F23%2Fa-2.0-grid-system%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2017/03/23/a-2.0-grid-system//) - [Bluesky](https://bsky.app/intent/compose?text=A 2.0 Grid System+https://www.netlify.com/blog/2017/03/23/a-2.0-grid-system//) * * * ### Tags - [Design](/blog/tags/design/) ## Keep reading ![](/_astro/cfdc437592ee2bf75a62690af707d52533d08063-1600x900_2njoni.webp) Opinions & Insights May 14, 2026 [ ### How we built Netlify Database for AI-native development ](/blog/how-we-built-netlify-database-for-ai-native-development) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças ![](/_astro/97a103abeebc73c01640f04a5c7555c1d10469aa-1200x675_Z8E0d4.webp) Opinions & Insights May 6, 2026 [ ### My experience building and deploying a project with Netlify Agent Runners ](/blog/my-experience-building-and-deploying-a-project-with-netlify-agent-runners) - ![Profile picture of Conor Martin ](/_astro/d1f759333090a4801940b47bf8701c441c6bd4a4-375x375_Bsg02.webp) Conor Martin ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)