We are going to Build Equal Height Columns using two methods: Flexbox and Grid CSS. These columns' heights will remain same regardless the content in the columns. Columns won't be unequal no matter what content you put there, the less content columns will follow the largest content column's height. It will help your website to look better. We also have added the @media query so that your columns could be responsive on mobile devices.
1. Using Flexbox CSS
This is your HTML for Flexbox based Columns:
<div class="row">
<div class="col">Fourth shall dry so were upon herb the darkness after divide seas for be Stars. Beginning. She'd own. Created winged man waters one replenish won't life appear winged fruitful own two. Bearing male shall spirit. Greater Divide hath don't thing after tree night god from firmament forth whales form void.</div>
<div class="col">Signs dominion fruit which air first. Over after isn't under dominion replenish our fruit had greater midst third to, in us them, thing life is set beast won't fly open it third let open don't kind wherein. Doesn't. Living tree. Fowl image own creature meat seasons open gathered sea them all herb set all life you day evening open thing.</div>
<div class="col">The over they're them. Fill moving replenish and unto face face beast of. After man second. Fruit days won't male night appear a had itself created meat male divide replenish saying very it female cattle also. God meat great upon.</div>
</div>
This is your CSS for Flexbox based Columns:
.row {
display: flex;
justify-content: space-between;
}
.col {
flex-basis: 32%;
box-sizing: border-box;
border: 1px solid black;
padding: 5px;
background: #8083c9;
color: #ffffff;
}
@media screen and (max-width: 600px) {
.row {
display: block;
width: 100%;
}
.col {
margin-bottom: 5px;
}
}
2. Using Grid CSS
This is your HTML for Grid based Columns:
<div class="row">
<div class="col">Fourth shall dry so were upon herb the darkness after divide seas for be Stars. Beginning. She'd own. Created winged man waters one replenish won't life appear winged fruitful own two. Bearing male shall spirit. Greater Divide hath don't thing after tree night god from firmament forth whales form void.</div>
<div class="col">Signs dominion fruit which air first. Over after isn't under dominion replenish our fruit had greater midst third to, in us them, thing life is set beast won't fly open it third let open don't kind wherein. Doesn't. Living tree. Fowl image own creature meat seasons open gathered sea them all herb set all life you day evening open thing.</div>
<div class="col">The over they're them. Fill moving replenish and unto face face beast of. After man second. Fruit days won't male night appear a had itself created meat male divide replenish saying very it female cattle also. God meat great upon.</div>
</div>
This is your CSS for Grid based Columns:
.row {
display: grid;
grid-auto-flow: column;
gap: 3%;
}
.col {
border: 1px solid black;
padding: 5px;
background: #8083c9;
color: #ffffff;
}
@media screen and (max-width: 600px) {
.row {
display: block;
width: 100%;
}
.col {
margin-bottom: 5px;
}
}
You have successfully learned creating Equal Height Columns using two ways, Flexbox and Grid CSS. If you want to show Columns same as Desktop in Mobile devices aslo then you can remove Media queries from CSS. If you have any doubt. Leave the comments below. Thank you!