<h1>CSS Grid - Masonry Layout</h1>
<div class="grid">
<div class="content flow">
<h2 class="title">This is really cool</h2>
<p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt, excepturi dolorem! A, recusandae error. Mollitia incidunt culpa inventore quae quis eveniet, similique ipsa, nisi, cum dolorum voluptas a sed.</p>
</div>
<div class="content flow featured">
<h2 class="title">This is really cool</h2>
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<h2 class="title">This is really cool</h2>
<p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
<h2 class="title">This is really cool</h2>
<p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
<h2 class="title">This is really cool</h2>
</div>
<div class="content flow">
<h2 class="title">This is really cool</h2>
<img src="https://unsplash.it/500/201" alt="">
<p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
<h2 class="title">This is really cool</h2>
<p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
<h2 class="title">This is really cool</h2>
<p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
<h2 class="title">This is really cool</h2>
<p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
<div class="content flow">
<h2 class="title">This is really cool</h2>
<p>Lorem ipsum dolor, <a href="#">sit amet consectetur</a> adipisicing elit. Aliquid sapiente perferendis nulla sed consequuntur eveniet. Itaque veritatis qui labore quia odio nihil, magni soluta facilis necessitatibus cumque repellendus optio laborum.</p>
</div>
</div>
.grid {
--gap: 1em;
--columns: 4;
max-width: 60rem;
margin: 0 auto;
display: column;
columns: var(--columns);
gap: var(--gap);
}
.grid > * {
break-inside: avoid;
margin-bottom: var(--gap);
}
@supports (grid-template-rows: masonry) {
.grid {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-template-rows: masonry;
grid-auto-flow: dense;
/* align-tracks: stretch; */
}
.grid > * {
margin-bottom: 0em;
}
}
.featured {
grid-column: span 2;
}
:root {
--ff-primary: basic-sans, sans-serif;
--clr-primary: #ee6352;
--clr-body: #333;
--clr-bg: #ddd;
--spacer: 1rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1,
h2,
h3,
p {
margin: 0;
}
h1 {
margin: 3rem 0;
text-align: center;
font-size: clamp(2rem, 1rem + 3vw, 6rem);
font-weight: 300;
line-height: 1;
opacity: 0.2;
}
.flow > * + * {
margin-top: var(--flow-space, var(--spacer));
}
body {
font-family: var(--ff-primary);
min-height: 100vh;
font-size: 1em;
line-height: 1.6;
color: var(--clr-body);
background: var(--clr-bg);
padding-bottom: 13rem;
}
a {
color: var(--clr-primary);
}
img {
max-width: 100%;
}
.content {
padding: 2em;
box-shadow: 0 0 3em rgba(0, 0, 0, 0.15);
background: white;
}
.title {
font-weight: 900;
color: var(--clr-primary);
line-height: 0.8;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.