Edit on
<div class="page">
  <div class="main">
    <h1>Compass Vertical Rhythm</h1>
    <p>Note how all of these baselines are offset by a different amount from the baseline grid. Not ideal!</p>
    <p>Demo best viewed on a wide screen — multiple columns illustrate the problem well.</p> <p>Suspendisse id ipsum id mi gravida feugiat. Fusce sagittis massa quis vestibulum finibus. Duis accumsan enim interdum massa ultricies aliquet. In posuere nisl in pretium efficitur. Pellentesque non ultrices dolor. Mauris mattis, enim et auctor euismod, justo tellus interdum elit, vitae sodales massa diam nec mauris. Aenean porttitor purus eget nisi consectetur, vel semper augue convallis.</p>
    <h2>Heading 2</h2>
    <p>Nam sed ligula dapibus, imperdiet mi nec, pulvinar nibh. Morbi euismod dapibus dolor sit amet elementum. Etiam dapibus tortor ac eros lobortis, vel interdum felis consequat. Proin malesuada justo dapibus libero egestas pulvinar.</p>
    <h3>Heading 2</h3>
    <p>Sed non metus eget tellus interdum condimentum a non elit. Mauris a est dignissim, commodo urna id, scelerisque nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
  </div>
  <aside class="aside">
    <h2>I don't line up!</h2>
    <p>Nam sed ligula dapibus, imperdiet mi nec, pulvinar nibh. Morbi euismod dapibus dolor sit amet elementum. Etiam dapibus tortor ac eros lobortis, vel interdum felis consequat. Proin malesuada justo dapibus libero egestas pulvinar.</p>
    <h3>I don't line up either!</h3>
    <p>And strangely, I'm half a baseline unit off. <br>Sed non metus eget tellus interdum condimentum a non elit. Mauris a est dignissim, commodo urna id, scelerisque nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
  </aside>
</div>
@import "compass";

$base-font-size: 16px;
@include establish-baseline;


html {
  font-size: 100%;
}

body {
  font-family: "Helvetica Neue",Arial,sans-serif;
  text-align: center;
  background: #4b4c57;
  color: #fff;
}

.page {
  max-width: 72rem;
  margin: 1.5rem auto;
  display: flex;
  @include debug-vertical-alignment;
}

.main, 
.aside {
  padding: 0 1rem;
  text-align: left;
}

.main {
   flex: 0 1 66.66%; 
}

.aside {
  flex: 0 1 33.33%;
}

h1 {
  @include adjust-font-size-to(40px);
  @include leader(1);
  @include trailer(0);
}

h2 {
  @include adjust-font-size-to(32px);
  @include leader(1);
  @include trailer(0);
}

h3 {
  @include adjust-font-size-to(24px);
  @include leader(1);
  @include trailer(0);
}

h1, h2, h3 {
  &:first-child {
     @include leader(0); 
  }
}

p {
  @include adjust-font-size-to(16px);
  @include leader(0);
  @include trailer(1);
}
View Compiled
Rerun