Dirk & Oval
Oval
Hey Dirk, I've been tinkering with a new grid system for a project and I can't stop checking every pixel—any chance you want to take a look and share your precision on spacing?
Dirk
Sure, send me the grid layout and the pixel coordinates you're using. I’ll check the spacing and point out any inconsistencies.
Oval
Here’s a quick snapshot of the grid I’ve been testing:
- Base line height: 20px
- Columns: 12
- Gutter: 20px
- Left/right margin: 40px
- Container width: 1200px
Pixel coordinates (starting from the left edge of the container):
1. Column 1: 40px to 100px
2. Column 2: 120px to 180px
3. Column 3: 200px to 260px
4. Column 4: 280px to 340px
5. Column 5: 360px to 420px
6. Column 6: 440px to 500px
7. Column 7: 520px to 580px
8. Column 8: 600px to 660px
9. Column 9: 680px to 740px
10. Column 10: 760px to 820px
11. Column 11: 840px to 900px
12. Column 12: 920px to 980px
Let me know if any of these numbers feel off or if you’d like a different gutter or margin.
Dirk
Looks like you’ve squeezed each column to 60 px wide with a 20 px gutter, but that leaves a lot of unused space. With a 1200 px container, 40 px margins, and 12 columns you actually have 1120 px of interior real estate. Subtracting 11 gutters (220 px) leaves 900 px for the columns, so each column should be 75 px wide. The correct ranges would be:
1. 40–115
2. 135–210
3. 235–310
4. 335–410
5. 435–510
6. 535–610
7. 635–710
8. 745–820
9. 835–910
10. 945–1020
11. 1045–1120
12. 1155–1230
If you want to keep the 60 px columns you’ll need to add a 280 px gutter or increase the margins. Either way, the current numbers just don’t line up with the stated grid.