Equal column height
When we are using grid system to structure our web elements, we can place more than one column items on the same horizontal level. It is easy to control the width of each column item, but it may not be the same for the height.
The height of each column item depends on its content length. Different content lengths will lead to different container heights and sometimes it will make our webpage not visually pleasing.
If you are having multiple column items on the same horizontal level, it is important to make all columns equal height.
Overview
We created a class called .equal which will make all column items that were presented in the same .row equal height. Please see below as an example:
3-column row without equal height
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
3-column row with equal height (using .equal class)
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="container">
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
</div>
<div class="container">
<div class="row equal">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
</div>
Style usage
1. 3-column (equal height) with description
July 2022 - Present
Marie Reay in Papua New Guinea: Exploring Cultures Through Objects
Online exhibition
July 2022 - Present
Marie Reay in Papua New Guinea: Exploring Cultures Through Objects
Online exhibition
July 2022 - Present
Marie Reay in Papua New Guinea: Exploring Cultures Through Objects
Online exhibition
2. 3-column (equal height) with title only
When we are using grid layouts to structure our web elements, it is easy to control the width of them. But the height of the column items can be different and break our design.
For example:
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Though our grid layout restricts the columns in equal width, the unequal heights are making the structure look ugly.
In this case, the class we could use is .equal. We should apply this class to the row division we created.
After adding the class, the code structure will be like this:
<div class="container">
<div class="row equal">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
</div>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.