I'm building the layout part of my design system and made a lot of research on the topic, but I'd love to see what are your choices.

I'm based on the 4|8pt grid system and a mix of 16 to 12 columns grids, but I've seen people using 4, 6, 12, 16 up to 24 columns grids, with a common span of 960px, 1120px or 1140px, 1200px or 1280px, and 1400px or 1440px.

So far at this moment, I'm sticking with a grid composed by 75px wide columns and 20px gutters, being, in combination for desktop:

• 12 columns grid with 1120px for narrower partes
• 16 columns grid with 1500px for the wider parts like the header and wider sections (just adding 2 more columns to each side of the original)

And for other breakpoints (1366px laptop, 1024px tablet and 768px mobile) it's almost the same layout, but rearranged in a percentage-based grid, being:

• 12 columns total width span of 85% with 2% spacing for laptop and tablet
• 4 columns with a total width span of 90% with 4% gutters for mobile

So, what are your choices on grids and widths?