--- 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-30T03:25:50.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/39409700c858c295fc5c37de304f679e44e21c32-2400x1350_Z1i5x2x.webp) Opinions & Insights August 14, 2026 [ ### The full power of Git, without the friction: A conversation with Netlify CTO Dana Lawson ](/blog/netlify-source-with-netlify-cto-dana-lawson) - ![Profile picture of Dana Lawson](/_astro/856bf146d0c05c9dc25d45b59f7eac955fbbd644-512x512_1n84rs.webp) Dana Lawson ![](/_astro/61190f2745496c269dd071680edec773a29eaef7-1800x1013_Z1NFVab.webp) Opinions & Insights August 12, 2026 [ ### Choosing an AI model: one prompt, 11 models, very different results ](/blog/one-prompt-11-models-very-different-results) - ![Profile picture of Elad Rosenheim](/_astro/be563e8998105c7e95b4db9110fa16b47cb68acd-230x230_Z2hYOHp.webp) Elad Rosenheim ## Recent posts News & Announcements August 25, 2026 [ ### Compete in OpenAI’s WebMCP Challenge with Netlify ](/blog/compete-openai-webmcp-challenge) - ![Profile picture of Karthik Puvvada](/_astro/e5524d3c315ad5114e1d5300d8991bfe902916fe-192x192_Z1w18MB.webp) Karthik Puvvada News & Announcements August 19, 2026 [ ### New clarifying questions in Agent Runners ](/blog/new-clarifying-questions-in-agent-runners) - ![Profile picture of Taylor Barnett-Torabi](/_astro/cf4624da8c1286738397b6fecb53bad504df140b-400x400_ZsvK0s.webp) Taylor Barnett-Torabi Opinions & Insights August 14, 2026 [ ### The full power of Git, without the friction: A conversation with Netlify CTO Dana Lawson ](/blog/netlify-source-with-netlify-cto-dana-lawson) - ![Profile picture of Dana Lawson](/_astro/856bf146d0c05c9dc25d45b59f7eac955fbbd644-512x512_1n84rs.webp) Dana Lawson ![](/_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/)