ft.com css grid example

by ian_smithz

HTML

<body class="Demo">
  <div class="Demo-header"></div>
  <main class="Demo-container">
    <section class="Grid Grid--headlines">
      <h1 class="Grid-title">Headlines</h1>
      <article class="Story Story--opinion">
        <div class="Story-cover"><img class="Story-coverImage" src="https://unsplash.it/640/360?random=dabf5f54-a4d9-4c78-bf16-94abfb5ce7ec" alt="" role="presentation"></div><span class="Story-tag">Ward Gray</span>
        <div class="Story-content">
          <h2 class="Story-title"><a class="Story-link" href="/content/dabf5f54-a4d9-4c78-bf16-94abfb5ce7ec">Ex pariatur do esse anim occaecat ipsum</a></h2>
          <p class="Story-summary">Commodo minim adipisicing do cillum ullamco ex commodo est voluptate ea veniam.</p>
          <time class="Story-date" datetime="Sat Oct 22 2016 06:07:57 GMT+0000 (UTC)">10/22/2016, 7:07:57 AM</time>
        </div>
        <ul class="Story-related">
          <li class="Story-relatedItem"><a class="Story-relatedLink" href="/content/399fdfe3-f2a6-4860-88f7-bdcefc23be31">Duis officia qui excepteur tempor nulla</a></li>
          <li class="Story-relatedItem"><a class="Story-relatedLink" href="/content/9412a65a-a9c1-4bc1-9e99-a9f54e422363">Cillum incididunt est laboris aliqua</a></li>
          <li class="Story-relatedItem"><a class="Story-relatedLink" href="/content/f321f767-da86-4194-8311-4f8f35debff8">Ea culpa sit dolore enim Lorem ipsum</a></li>
        </ul>
      </article>
      <article class="Story Story--picture">
        <div class="Story-cover"><img class="Story-coverImage" src="https://unsplash.it/640/360?random=b3c3a5e1-a9bc-4653-a307-bdd058197fcd" alt="" role="presentation"></div><span class="Story-tag">Quonk</span>
        <div class="Story-content">
          <h2 class="Story-title"><a class="Story-link" href="/content/b3c3a5e1-a9bc-4653-a307-bdd058197fcd">Ullamco amet veniam exercitation magna</a></h2>
          <p class="Story-summary">Aliquip ea aute quis velit consectetur. Pariatur minim non...

CSS

@charset "UTF-8";


.Grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  overflow: hidden;
}

.Grid > * {
  position: relative;
}

.Grid > *:before,
.Grid > *:after {
  content: '';
  position: absolute;
}

.Grid > *:before {
  top: 0;
  bottom: 0;
  left: -10px;
  border-left: 1px solid #cec6b9;
}

.Grid > *:after {
  right: 0;
  bottom: -10px;
  left: 0;
  border-bottom: 1px solid #cec6b9;
}

.Grid-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

.Grid--headlines .Story:nth-of-type(1) .Story-cover {
  display: none;
}

.Grid--headlines .Story:nth-of-type(1) .Story-title {
  font-size: 2.75rem;
  line-height: 1;
}

.Grid--headlines .Story:nth-of-type(2) .Story-summary {
  display: none;
}

.Grid--headlines .Story:nth-of-type(6) .Story-cover {
  display: none;
}

.Grid--headlines .Story:nth-of-type(6) .Story-summary,
.Grid--headlines .Story:nth-of-type(7) .Story-summary {
  display: none;
}

.Grid--headlines .Story:nth-of-type(7) .Story-cover {
  float: left;
  width: 40%;
  margin-right: 10px;
}

.Grid--headlines .Story:nth-of-type(n+8):nth-of-type(-n+11) .Story-title {
  font-size: 1.25rem;
}

.Grid--headlines .Story:nth-of-type(n+8):nth-of-type(-n+11) .Story-cover,
.Grid--headlines .Story:nth-of-type(n+8):nth-of-type(-n+11) .Story-summary {
  display: none;
}

.Grid--headlines .FastNews {
  display: none;
}

@media screen and (max-width: 40em) {
  .Grid--headlines .Story {
    grid-column: span 12;
  }
  .Grid--headlines .Story:nth-of-type(3),
  .Grid--headlines .Story:nth-of-type(4) {
    grid-column: span 6;
  }
  .Grid--headlines .Story:nth-of-type(5) .Story-cover {
    float: right;
    width: 40%;
    margin-left: 10px;
  }
  .Grid--headlines .Story:nth-of-type(5) .Story-summary {
    display: none;
  }
}

@media screen and (min-width: 40em) and (max-width: 55em) {
  .Grid--headlines .Story:nth-of-type(1),
  .Grid--headlines .Story:nth-of-type(2)...