<div class="container">
<article class="grid">
<figure class="grid__media">
<img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=17d687b8b0b7e6da5ee22d8f343f09cd" alt="A beautiful siamese cat with blue eyes" width="800px" height="600px" />
</figure>
<div class="grid__text">
<h3>Cats are great</h3>
<p>While it is commonly thought that the ancient Egyptians were the first to domesticate cats, the oldest known pet cat was recently found in a 9,500-year-old grave on the Mediterranean island of Cyprus. This grave predates early Egyptian art depicting cats by 4,000 years or more.</p>
</div>
</article>
<!--Grid 2-->
<article class="grid grid--2">
<figure class="grid__media">
<img src="https://images.unsplash.com/photo-1455970022149-a8f26b6902dd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=71ae25c1db2bdf4ece600a85186fb6e5" alt="A fluffy tabby cat with green eyes" width="600px" height="800px" />
</figure>
<div class="grid__text">
<h3>Cat limitations</h3>
<p>A cat can’t climb head first down a tree because every claw on a cat’s paw points the same way. To get down from a tree, a cat must back down.</p>
</div>
</article>
<!--Grid 3-->
<article class="grid grid--3">
<figure class="grid__media">
<img src="https://images.unsplash.com/photo-1511275539165-cc46b1ee89bf?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=fbdeefbc87de11ffe211f913e6439430" alt="A grey cats lying down licking its paw" width="800px" height="600px" />
</figure>
<div class="grid__text">
<h3>Space cats</h3>
<p>The first cat in space was a French cat named Felicette (a.k.a. “Astrocat”) In 1963, France blasted the cat into outer space. Electrodes implanted in her brains sent neurological signals back to Earth. She survived the trip.</p>
</div>
</article>
<!--Grid 4-->
<article class="grid grid--4">
<figure class="grid__media">
<img src="https://images.unsplash.com/photo-1518843025960-d60217f226f5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6d2c2d79afc7d50fe882bdca5e4bbd4a" alt="A tortoiseshell cat looking alert" width="600px" height="800px" />
</figure>
<div class="grid__text">
<h3>Cats are brainy</h3>
<p>A cat’s brain is biologically more similar to a human brain than it is to a dog’s. Both humans and cats have identical regions in their brains that are responsible for emotions.</p>
</div>
</article>
<div class="grid grid--bg">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
* {
box-sizing: border-box;
}
// Basic visual styling
body {
font-family: 'Open Sans', sans-serif;
}
img {
width: 100%;
height: auto;
display: block;
}
figure {
margin: 0;
}
h3 {
margin: 0 0 20px 0;
font-size: 1.6rem;
letter-spacing: -0.04em;
}
p {
line-height: 1.4;
margin-bottom: 0;
}
.container {
position: relative;
}
// Grid stuff starts here
.grid {
padding: 40px 0;
@media (min-width: 768px) {
display: grid;
grid-template-columns: [start] minmax(20px, 1fr) [wrapper-start] repeat(12, minmax(0, 70px)) [wrapper-end] minmax(20px, 1fr) [end];
grid-gap: 20px;
}
}
.grid__media {
grid-column: var(--mediaStart, wrapper-start) / var(--mediaEnd, 8);
}
.grid__text {
grid-column: var(--textStart, 8) / span var(--textSpan, 6);
padding: 20px;
@media (min-width: 768px) {
padding: 0;
}
}
.grid__media,
.grid__text {
grid-row: 1; // We want to keep our items on the same row
}
.grid--2,
.grid--4 {
--mediaStart: 8;
--mediaEnd: 14;
--textStart: wrapper-start;
}
// Placement with variables
@media(min-width: 960px) {
.grid {
--mediaStart: wrapper-start;
--mediaEnd: 9;
--textStart: 10;
--textSpan: 4;
}
.grid--2 {
--mediaStart: 9;
--mediaEnd: end;
--textStart: wrapper-start;
}
.grid--2,
.grid--4 {
--mediaStart: 8;
}
.grid--3 {
--mediaStart: start;
}
.grid--4 {
--mediaEnd: wrapper-end;
--textStart: 3;
}
}
// Background grid, for illustration
.grid--bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
div {
background-color: #ECEFF1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.