ADVERTISEMENT

Create Waterfall Layout using CSS

Telegram Group Join Now

ADVERTISEMENT

Create Waterfall Layout using CSS

Create Waterfall Layout using CSS
Create Waterfall Layout using CSS

 

ADVERTISEMENT

ADVERTISEMENT

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.

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

ADVERTISEMENT

ADVERTISEMENT

(Waterfall Layout using CSS)
Project NameWaterfall Layout using CSS
Code ByCodewithemil
Project DownloadCodePen Link Given
Language UsedHTML and CSS
External Link / DependenciesNo
ResponsiveNo
Waterfall Layout using CSS project information
 

HTML code of Waterfall Layout

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. I personally recommend you add 20, since that’s the number we’re going to be following in this tutorial.

Read Also:

Restaurant Website Using HTML and CSS

ADVERTISEMENT

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

ADVERTISEMENT

Read also:

Create A Travel Website Using HTML & CSS

ADVERTISEMENT

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

ADVERTISEMENT

Now we get to the interesting part; the container.

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

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

50+ HTML, CSS & JavaScript Projects With Source Code

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!

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

Output

(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

 

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:

@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;
  }
}
And here’s the output:
 

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)

Waterfall Layout using CSS

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 Preview before starting coding, if you’d like to check it out!

How to create Waterfall Layout using CSS?

Let’s Start creating Wterfall Layout using CSS 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. I Personally Recommend You Add 20, Since That’s The Number We’re Going To Be Following In This Tutorial.

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT