<div class="grid-layout">
  <div class="news-stories" style="background-color: aquamarine;">
    Some news stories
  </div>
  <div class="quick-links" style="background-color: lightsalmon;">
    Quick links
  </div>
  <div class="twitter-feed" style="background-color: lightskyblue;">
    Our twitter feed
  </div>
  <div class="whats-on" style="background-color: lightgreen;">
    What's on at the University
  </div>
  <div class="featured-article" style="background-color: lightseagreen;">
    A featured article
  </div>
  <div class="expert-comment" style="background-color: lightslategray;">
    An expert comment link
  </div>
  <div class="featured-video" style="background-color: lightcoral;">
    A video and some other content
  </div>
  <div class="staff-profile" style="background-color: lightcyan;">
    A featured staff profile
  </div>
  <div class="callout-story" style="background-color: lightyellow;">
    A callout story
  </div>
</div>
@grid-gutter-width: 20px;
@row-height: 300px;
@column-count: 4;

.grid-layout {
  display: grid;
  grid-template-columns: repeat(@column-count, 1fr);
  grid-auto-rows: @row-height;
  grid-auto-flow: row dense; 
  grid-gap: @grid-gutter-width;
  
  .news-stories, .featured-video, .staff-profile {
    grid-column-end: span 3; // 3 cells wide
  }

  .featured-article {
    grid-column-end: span 2; // 2 cells wide
  }
  
  .quick-links {
    grid-row-end: span 2; // 2 rows high
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.