--- title: "A 2.0 Grid System | Netlify" description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!" source: "https://www.netlify.com/blog/2017/03/23/a-2.0-grid-system/" last_updated: "2026-08-05T03:28:29.000Z" --- 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/697ddad3fd19082576ff7013478991ed6c80babc-1800x1013_hBTbm.webp) Opinions & Insights July 28, 2026 [ ### Open Weights and the 2nd World ](/blog/open-weights-and-the-2nd-world) - ![Profile picture of Mathias Biilmann](/_astro/f193d4707a6391d843d5aaa73338b5a5971ec5cc-960x960_1Yylqm.webp) Mathias Biilmann ![](/_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 ## Recent posts Opinions & Insights July 28, 2026 [ ### Open Weights and the 2nd World ](/blog/open-weights-and-the-2nd-world) - ![Profile picture of Mathias Biilmann](/_astro/f193d4707a6391d843d5aaa73338b5a5971ec5cc-960x960_1Yylqm.webp) Mathias Biilmann Tools & Services July 28, 2026 [ ### MCP goes stateless and extensible ](/blog/mcp-goes-stateless-and-extensible) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements July 28, 2026 [ ### New Netlify projects are now private by default ](/blog/new-netlify-projects-are-now-private-by-default) - ![Profile picture of Taylor Barnett-Torabi](/_astro/cf4624da8c1286738397b6fecb53bad504df140b-400x400_ZsvK0s.webp) Taylor Barnett-Torabi ![](/_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/)