PUBLISHED ON: AUGUST 21, 2021
How to create equal height columns with CSS?
We create columns to form a particular layout on the webpage. Though we place them side by side but sometimes due to their unequal height it does not looks good. So, we need to make it equal. We can do so using CSS properties.
In this tutorial, we will learn to create columns with equal height using CSS properties.
Creating an equal height column
Take a <div> container and wrap the column within it. Add display: table to make the container behave like a table. And add display: table-cell to the column so that it behaves like a table cell. It will make all the columns of equal height.
Example: Creating an equal height column with CSS
Here is an example to create an equal height column with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
dispaly: table;
width: 100%;
}
.column {
display: table-cell;
padding: 16px;
}
</style>
</head>
<body>
<h2> Equal hieght container</h2>
<div class="container">
<div class="column" style="background-color: cyan;">
<p> Equal column </p>
<p> Equal column </p>
<p> Equal column </p>
<p> Equal column </p>
</div>
<div class="column"style="background-color: lime;">
<p> Equal column </p>
<p> Equal column </p>
<p> Equal column </p>
</div>
<div class="column"style="background-color: yellow;">
<p> Equal column </p>
<p> Equal column </p>
</div>
</div>
</body>
</html>
Output
Here is the output of the above code.
Example: Creating an equal height column with CSS
There is yet another way to do so. Use display: grid to make container behave like a grid. Also, add grid-auto-flow: column properties. Here is an example of it.
Conclusion
In this tutorial, we have learned to create equal height columns. We can do so using the display property. Either use it as a table or grid. It has been explained with examples.
