What you're describing is a rigid, "hard" grid, where each element sits perfectly on the underlying grid. Doable in your design software by cheating a bit, but since it's also not really technologically feasible, I'd advise against it.

It would be better to use a "soft" grid, where you space your elements relatively to their position, rather than rigid.

Here's a quote from spec.fm about the 8-Point-Grid:

There are actually two prominent versions of this system. One that places elements into a system-displayed grid defined in 8-point increments (we’ll call this the “Hard Grid” method) and another that simply measures 8-point increments between individual elements (we’ll call this the “Soft Grid” method).

The primary argument for the Hard Grid method is that by using additional transparent background elements and then grouping them to small groups of foreground elements, you can keep track of margin and padding on a per-element basis and just snap these containers to the grid like bricks. Material Design - where everything is already designed to a 4pt grid - naturally conforms to this method.

The argument for the Soft Grid method is that when it comes time to code up an interface, using an actual grid is irrelevant because programming languages don’t use that kind of grid structure - it’ll just get thrown away. When the speed at which you arrive at a high-quality, programmable set of mockups is a priority, bypassing Hard Grid’s extra overhead of managing additional layers in favor of Soft Grid’s more fluid, minimal structure can be an advantage. This also can be more favorable to iOS where many system UI elements are not defined by an even grid.

By cheating I mean you could use 0% opacity rectangle layers as background elements and draw 1px shadow or inner shadow. This way the group will remain the "right" size, but you'll have your divider in there.

Area17, for example, solves this "problem" similar to this, just by setting lines off by 1px:

Image listing with 1 pixel horizontal separation lines → Lines are on the 5 x 5 pixel grid which creates asymmetric spacing above and below the lines (like 30 versus 29 px). Here it is possible to “cheat” and forget about 1 px spacing difference, rather keeping the content on the 5 x 5 pixel grid. This is easier to work with and developers will know the space should be the same.

It's handy to use shadows to achieve 1px border lines:

https://pasteboard.co/IhfiFvl.png

This way the elements retain their dimensions.

Well for one thing, Sketch math can be totally off after grouping things vs. independent elements. But IMO, as long as you keep your spacing rhythm consistent outside of the individual component, something like that shouldn't be a big deal.

Also, (and apologies if it's an obvious point) if it's for the web, your users may be using different fonts on the stack with varying text heights so it's really too much to expect this purity throughout all experiences in the first place.

So to answer your question, is it wrong … that's up to you to decide.

For me, it becomes problematic because now you have two things that are "breaking" your design grid: the 1 px line and the 33 px tall group.

That said, you can fix this easily by making your line 2px or putting it inside a container box. Additional details here

Hi, Anmol,

In company I work, we have a rule to land odd shapes on top of the grid-line. This way designed content preserves 6px grid structure (in our case we use 6px grid). Spacing between top and bottom becomes uneven, but it lets us easer track visual bugs.

This rule applies only when working in graphic editors like Sketch. Actual React components have defined margins by power of 6.