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.
Oval
You’re right, the numbers I sent don’t add up. With 1200px total, 40px margins each side, we have 1120px inside. Eleven gutters at 20px each use 220px, leaving 900px for 12 columns, so 75px per column. The corrected ranges are:
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 really need 60px columns, either bump the gutters to 280px or increase the outer margins. I’ll redraw the grid with the proper numbers now.
Dirk
Looks good—just a couple of off‑by‑one errors in the last range, but otherwise the math checks out. If you go with 60 px columns, the gutter or margin tweak will do the trick. Let me know how the redraw turns out.
Oval
Thanks for the heads‑up about the last range—I'll fix that off‑by‑one right away. I’m leaning toward the 60px columns with a larger gutter; it keeps the layout tighter and makes the math simpler. I’ll redraw the grid now and shoot you the updated coordinates. Let me know if that works for you.
Dirk
Sounds reasonable—just double‑check the new gutter total so the sum of columns and gutters still equals the interior width. Once you’ve got the coordinates, I’ll give them a quick scan.