How can I make this masonry CSS only layout organize from left to right? Currently the card stack order is top to bottom. I would like to maintain the same layout(every card has the same width), and just have them orgazine from left to right instead, like the red numbers on this picture:
The height of each card is not set, and they can vary depending on how many/few entries are in each of them.
/* Defaults */
body {
background: #f9f9f9;
color: #465665;
}
a {
transition: all 0.25s ease-in-out;
text-decoration: none;
color: #d8dee9;
}
a:link,
a:visited {
width: 100%;
border-radius: 6px;
padding: 9px 0px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: red;
color: #d8dee9;
}
/* The title */
.title {
font-weight: 700;
}
/* Masonry grid */
.masonry {
transition: all 0.5s ease-in-out;
column-gap: 30px;
column-fill: initial;
max-width: 75vw;
margin: 0px auto 20px auto;
}
.brick {
width: 100%;
}
/* Masonry item */
.masonry .brick {
margin-bottom: 30px;
display: inline-block;
/* Fix the misalignment of items */
vertical-align: top;
/* Keep the item on the very top */
}
.list {
display: grid;
grid-gap: 0.3em;
list-style-type: none;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
}
.card {
background: #666;
border-radius: 12px;
font-size: 1.8vh;
color: #d8dee9;
padding-top: 4vh;
padding-bottom: 4vh;
padding-left: 3vh;
padding-right: 3vh;
font-weight: bold;
text-align: center;
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
display: inline-block;
width: 100%;
}
.card:hover {
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
transform: translateY(-0.1rem);
}
/**
* BOX HACKING
*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.masonry {
column-count: 2;
}
}
/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
.desc {
font-size: 1.25em;
}
.intro {
letter-spacing: 1px;
}
.masonry {
column-count: 4;
}
}<body>
<div>
<div>
<h1>Title</h1>
<p>Text</p>
</div>
<div class="masonry">
<div class="brick">
<div class="card">
<h2>1</h2>
<ul class="list">
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
</ul>
</div>
</div>
<div class="brick">
<div class="card">
<h2>2</h2>
<ul class="list">
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
</ul>
</div>
</div>
<div class="brick">
<div class="card">
<h2>3</h2>
<ul class="list">
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
</ul>
</div>
</div>
<div class="brick">
<div class="card">
<h2>4</h2>
<ul class="list">
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
</ul>
</div>
</div>
<div class="brick">
<div class="card">
<h2>5</h2>
<ul class="list">
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
</ul>
</div>
</div>
<div class="brick">
<div class="card">
<h2>6</h2>
<ul class="list">
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
</ul>
</div>
</div>
<div class="brick">
<div class="card">
<h2>7</h2>
<ul class="list">
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
</ul>
</div>
</div>
<div class="brick">
<div class="card">
<h2>8</h2>
<ul class="list">
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
</ul>
</div>
</div>
<div class="brick">
<div class="card">
<h2>9</h2>
<ul class="list">
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
<li><a class="bookmark" href="https://duckduckgo.com/">Text</a></li>
</ul>
</div>
</div>
</div>
<!-- .masonry -->
</div>
</body>
