<div class="wrapper">
<div class="grid">
<div class="grid__item grid__item--heading">
<h2>Heading</h2>
</div>
<div class="grid__item grid__item--media">
</div>
<div class="grid__item grid__item--body">
<h3>Subheading</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
$wrapper: 1200px;
$col: 1fr;
$gutter: 20px;
$wrapper-l: 90%;
$col-l: calc((1000px - (13 * 40px)) / 12);
$gutter-l: 40px;
$col-xl: calc((1200px - (13 * 50px)) / 12);
$gutter-xl: 50px;
body {
background-color: lighten(grey, 30%);
}
.wrapper {
max-width: $wrapper;
margin: 20px auto;
@media (min-width: 1300px) {
max-width: $wrapper-l;
}
}
.grid {
display: grid;
padding: $gutter;
grid-template-columns: 1fr repeat(12, $col) 1fr;
grid-template-rows: repeat(2, minmax(150px, auto));
grid-gap: $gutter;
border: 1px solid grey;
background: white;
width: auto;
@media (min-width: 1300px) {
grid-template-columns: 1fr repeat(12, $col-l) 1fr;
grid-gap: $gutter-l;
padding: $col-l;
}
@media (min-width: 1500px) {
grid-template-columns: 1fr repeat(12, $col-xl) 1fr;
grid-gap: $gutter-xl;
padding: $col-xl;
}
}
.grid__item {
border: 1px solid blue;
}
.grid__item--heading {
grid-column: 2 / 11;
}
.grid__item--body {
grid-column: 2 / 8;
grid-row: 2 / span 1;
}
.grid__item--media {
background: hotPink;
grid-column: 11 / 14;
grid-row: 1 / span 2;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.