<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.