Create a Waterfall Layout using CSS

Hello, coders! Today, we’re going to make a Waterfall Layout using pure CSS. During this project, we’re going to be working with a property that is unknown to many developers, but extremely useful, since it is neutral and can be changed at any moment in the code.

What is WaterFall Layout ?

Waterfall layout is also known as Masonry layout, is a popular way to display different-sized images together using CSS. To use a masonry layout in a CSS grid, one of the grid axes needs to have the value masonry.

Here’s the small CodePen Preview before starting coding, if you’d like to check it out!

<ul class="container">
  <li class="card --red">1</li>
  <li class="card --orange">2</li>
  <li class="card --yellow">3</li>
  <li class="card --green">4</li>
  <li class="card --dark">5</li>
  <li class="card --white">6</li>
  <li class="card --gray">7</li>
  <li class="card --orange">8</li>
  <li class="card --dark-gray">9</li>
  <li class="card --skin">10</li>
  <li class="card --brown">11</li>
  <li class="card --green">12</li>
  <li class="card --dark">13</li>
  <li class="card --white">14</li>
  <li class="card --gray">15</li>
  <li class="card --yellow">16</li>
  <li class="card --dark-gray">17</li>
  <li class="card --skin">18</li>
  <li class="card --brown">19</li>
  <li class="card --lime">20</li>
</ul>

So, we’re going to add the class “container” to the <ul>, while adding “card” and their respective colors as class to each one of the <li> elements.

As you may’ve noticed, each <li> element has its respective number written inside of it.

You may also have clue on how it’s going to look up to now; just a single unordered list, with 20 numbers arranged.

Read also:

Create A Travel Website Using HTML & CSS

(What we have up to now, just an unordered list with 20 list items)

CSS code of Waterfall Layout

Now, we’re gettin’ to the CSS. We’re going to be working with the column-count property, so let’s get to it

First of all, we’re going to be adding some default styles.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
  font-family: Poppins;
}

body {
  background: #484545;
  padding: 1px;
}

Output

(Preview of what we’ve until now)

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #484545;
  padding: 1px;
}

.container {
  list-style: none;
  column-gap: 0;
  column-count: 5;
}

.card {
  width: 100%;
  height: 400px;

  border: 1px solid #333;
  break-inside: avoid;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

(Layout using column-count property)

Next up we have the card. In this case, we’re going to be using the Flexbox layout, since it is easier to understand & use for this type of situations rather than grid.

We’re going to set a specific height and a specific width to our card, as well as a border.

We’re next going to use another new property; break-inside. This property declares how the parts should behave inside a previously-generated container. We’re going to give it the value avoid, so that, as its name says, we’ll avoid any break to be inserted within the main box. More info here.

Portfolio Website using HTML and CSS (Source Code)

Now, we should be adding the respective colors & heights for our different LI items. You can switch them up or even change the values; remember this is just a reference.

This is the code we’re going to be using (just colors & heights):

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
  font-family: Poppins;
}

body {
  background: #484545;
  padding: 1px;
}

.container {
  list-style: none;
  column-gap: 0;
  column-count: 5;
}

.card {
  width: 100%;
  height: 400px;

  border: 1px solid #333;
  break-inside: avoid;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.--red {
  background: #E86F51;
  height: 200px;
}
.--orange {
  background: #F5A462;
  height: 350px;
}
.--yellow {
  background: #E8C468;
  height: 350px;
}
.--green {
  background: #2B9E91;
  height: 400px;
}
.--dark {
  background: #274754;
  height: 450px;
  color: #f6f6f6;
}
.--white {
  background: #EADFC9;
  height: 350px;
}
.--gray {
  background: #BFDBCF;
}
.--dark-gray {
  background: #93ADA4;
  height: 300px;
}
.--skin {
  background: #F3A14B;
  height: 350px;
}
.--brown {
  background: #DC7646;
  height: 400px;
}
.--lime {
  background: #8cc97f;
  height: 200px;
}

This should be our result up to now:

Optional Step

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
  font-family: Poppins;
}

body {
  background: #484545;
  padding: 1px;
}

.container {
  list-style: none;
  column-gap: 0;
  column-count: 5;
}

.card {
  width: 100%;
  height: 400px;

  border: 1px solid #333;
  break-inside: avoid;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.--red {
  background: #E86F51;
  height: 200px;
}
.--orange {
  background: #F5A462;
  height: 350px;
}
.--yellow {
  background: #E8C468;
  height: 350px;
}
.--green {
  background: #2B9E91;
  height: 400px;
}
.--dark {
  background: #274754;
  height: 450px;
  color: #f6f6f6;
}
.--white {
  background: #EADFC9;
  height: 350px;
}
.--gray {
  background: #BFDBCF;
}
.--dark-gray {
  background: #93ADA4;
  height: 300px;
}
.--skin {
  background: #F3A14B;
  height: 350px;
}
.--brown {
  background: #DC7646;
  height: 400px;
}
.--lime {
  background: #8cc97f;
  height: 200px;
}


@media (min-width: 320px) and (max-width: 759.5px) {
  .container {
    column-count: 2;
  }
}
@media (min-width: 760px) and (max-width: 979.5px) {
  .container {
    column-count: 3;
  }
}
@media (min-width: 980px) and (max-width: 1023.5px) {
  .container {
    column-count: 4;
  }
}
@media (min-width: 1024px) {
  .container {
    column-count: 5;
  }
}

Conclusion

Hope you understood all the properties, values & layouts we used today. Have any questions? Don’t forget to ask them below! Or, you can contact me in my Instagram @codewithemil, or you can ask my superior @codewith_random.

Hangman Game using HTML, CSS & JavaScript

So that was it for today! Make sure to check out the other projects made by this amazing team.

¡Adiós amigos! Nos vemos pronto 🙂 —- (Bye friends! See you soon! 🙂 )

By: CodeWithEmil (Instagram, Twitter, CodePen)