<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>
:root {
--wrapper: 1200px;
--col: 1fr;
--gutter: 20px;
@media (min-width: 1300px) {
--wrapper: 90%;
--col: calc((1000px - (13 * 40px)) / 12);
--gutter: 40px;
}
@media (min-width: 1500px) {
--wrapper: 90%;
--col: calc((1200px - (13 * 50px)) / 12);
--gutter: 50px;
}
}
body {
background-color: lighten(grey, 30%);
}
.wrapper {
max-width: var(--wrapper);
margin: 20px auto;
}
.grid {
display: grid;
padding: var(--gutter);
grid-template-columns: 1fr repeat(12, var(--col)) 1fr;
grid-template-rows: repeat(2, minmax(150px, auto));
grid-gap: var(--gutter);
border: 1px solid grey;
background: white;
width: auto;
}
.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.