On the matter, but not entirely a good answer:
Graphic design relates to rythm in the same way as music does. In the middle of a 4/4 beat there might be a break defying all rules, but it always returns to the rythm again.
In the type world, you might set the text 11/15 and the headlines in a completely different size/leading, but you make sure space above and below gets you back into rythm again.

I, myself, practically solves this by aligning text to the baseline, and placing headlines manually. Sometimes the leading is a double baseline step, sometimes I use three baselines to cover two lines of display.

There really is no 'baseline' concept in CSS.

However, if these headlines will always be at the top of the columns, you could get away with some absolute positioning of the H* tags to be on the same baseline.

Cheers Frode, I thought there was a way of setting the type so that it would mimic as if setting it to the baseline, hmm need to get home and read the books again

Not sure if I'm helpful:) Go on home, have a read, and see if you can figure it out.

Use multiples of your body text line height to achieve this.
E.g. if you have p set to 12/18pt you could use two imaginary 18pt baselines (36pt total) for h1 with 14/18pt with 36-14=22pt margin (distribute those 22pt to your liking between margin-top and margin-bottom). For a complete example see this article (via daringfireball.net).

You can create a repeating background image with a line of color at the bottom, you'll have to figure out your spacing to the grid you want to use, and then adjust your em based padding/margins/line-height to achieve the correct spacing between elements. With the background used as your visual baseline of course. Just remember to remove the styled background when you're done, unless you like it...