<div class="grid--blog">
    <header class="header">My header</header>

    <article class="content">
        <h1>Using negative space</h1>
        <p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>

        <p>By making the content span a number of rows, we can then space the blocks out next to that content. Each in their own row.</p>
    </article>

    <div class="block-a">Block A</div>
    <div class="block-b">Block B</div>
    <div class="block-c">Block C</div>
    <footer class="footer">My footer</footer>
</div>
<div class="grid--blog">
  <header class="header">My header</header>
  
  <article class="content">
    <h1>Using negative space</h1>
    <p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>
    
    <p>By making the content span a number of rows, we can then space the blocks out next to that content. Each in their own row.</p>
  </article>
  
  <div class="block-a">Block A</div>
  <div class="block-b">Block B</div>
  <div class="block-c">Block C</div>
  <footer class="footer">My footer</footer>
</div>
{
  "name": "Blogs"
}

No notes defined.