grid layouts

<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<header></header>
<section class="homepage-splash atf-grid">
  <div class="splash__intro">
    <h1>Title of the page</h1>
    <p>Your pier-glass will be minutely and
multitudinously scratched in all directions</p>
  </div>
  <div class="splash__promo">.journal-splash</div>
</section>
<section class="promo-right atf-grid">
  <div class="promo__text">.promo-text</div>
  <div class="promo__image">.promo-image</div>
</section>
<section class="promo-left atf-grid">
  <div class="promo__text ragged">
  <p>[ This div is classed <em>.ragged</em> which means that it extends, on the right, over ther grid column gap]</p>
  <p>He stumbled and half fell.
Through a blur he saw rows of faces, curious, concerned, anxious. Men
and women halting to see what the disturbance was. He fought past them
toward his store. He could see Fergusson inside talking to a man,
showing him an Emerson TV set. Pete Foley in the back at the service
counter, setting up a new Philco. Loyce shouted at them frantically.
His voice was lost in the roar of traffic and the murmur around him.</p></div>
  <div class="promo__image">.promo-image</div>
</section>
<section class="promo-right text-first atf-grid">
  <div class="promo__text">.promo-text</div>
  <div class="promo__image">.promo-image</div>
</section>
<section class="promo-50-50 atf-grid">
  <div class="small-promo-primary">
    <div class="promo__text">.promo-text</div>
    <div class="promo__image">.promo-image</div>
  </div>
  <div class="small-promo-secondary">
    <div class="promo__text">.promo-text</div>
  </div>
</section>
<section class="journal-archive atf-grid">
  <div class="journal-archive__heading">archive heading</div>
  <div class="journal-archive__posts atf-archive-grid">
    <div class="journal-archive__post">post</div>
    <div class="journal-archive__post">post</div>
    <div class="journal-archive__post">post</div>
    <div class="journal-archive__post">post</div>
    <div class="journal-archive__post">post</div>
    <div class="journal-archive__post">post</div>
    <div class="journal-archive__post">post</div>
  </div>
</section>
<footer></footer>
</body>
</html>