Create Waterfall Layout using CSS | CSS waterfall page layout

Create Waterfall Layout using CSS | CSS waterfall page layout 

Create Waterfall Layout using CSS | CSS waterfall page layout


Hello, World! ๐ŸŒŽ

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.

Here's the small CodePen, if you'd like to check it out!


(Preview of the project)


HTML Code

Let's start by arranging elements.

First of all, we're going to be needing a UL (unordered list) element, and as many LI (list) elements as you want to. I personally recommend you to add 20, since that's the number we're going to be following in this tutorial.

 <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.

See the Pen 1. Waterfall Layout Using CSS by Emil (@codewithemil) on CodePen.

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


CSS Code

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;  
 }  


See the Pen 2. Waterfall Layout Using CSS by Emil (@codewithemil) on CodePen.


(Preview of what we've until now)


Now we get to the interesting part; the container.

First of all, we're going to be removing the list selector (dots) with the property list-style, and setting the value to none.

We're going to set the margin between elements with the column-gap property. In my case, I like to set it to zero, but you can change it as much as you can. You can either use a default unit (normal, inherit, none, etc.), or choose a CSS unit.

Now, we're going to add the star property of this project; column-count.

It is independent from every CSS layout system (Grid/Flexbox).

Column-count, as its name says, is in charge of dividing every item of a container onto the chosen number of columns. 

In this case, we're going to set the value to 5, since we want to have 5 columns. You can learn more about it here.

So, let's get to the code!

 .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;  
 }  

See the Pen 3. Waterfall Layout Using CSS by Emil (@codewithemil) on CodePen.


(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.

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):

 .--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:

See the Pen 4. Waterfall Layout Using CSS by Emil (@codewithemil) on CodePen.


Optional Step

This is a completely optional step; make our layout responsive.

We're going to begin by adding some Media Queries. We will be using some common screen sizes.

And, we're going to be changing only the number of columns we're having, not anything else.

Here's the code:

 @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;  
  }  
 }  


And here's the output:

See the Pen 5. Waterfall Layout Using CSS by Emil (@codewithemil) on CodePen.


Hope you understood all the properties, values & layouts we used to day. 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).


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)

Check out more.....

Post a Comment

Previous Post Next Post