CSS Tricks – How to Get Equal height of box in a row

Virtueinfo Virtueinfo
November 13, 2018

Website designing has evolved considerably which enables us to create many new and innovative designs if done right. One of the website design trends is having equal heights of box in a row.

When designing box view HTML, the same height box often requires the attention of web designers.

Equal height columns with background box have been a need of web designers everywhere while building HTML. If all the inner box have the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.

How does it work?
Step 1: Markup

I’ve created a .flex-row container with a items of .flex-column elements inside. Each list .items contains some content elements such as <img>, <a>, <h1> and <p>.

Step 2: Create a flexbox container

First let’s use the display:flex; value to be declared on the containing element .flex-row, which as a result makes it’s direct children flex elements .flex-column. Flex-wrap means that items will move to new row when the horizontal space is empty.

Step 3: Add flex to column

The flex property is shorthand for flex grow, flex shrink and flex basis. I have used flex: 0 0 100%; which means:
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100%;
Here, Flex-basis is set to 100%, so the free space is used based on the flex-grow value.

Step 4: Add media queries for column width

Here I’ve added some media queries. My layout will start with one item per row until the screen size reaches 768px. Then it will fit two items into each row until the screen size gets to 992px, Then it will fit three items into each row until the screen size gets to 1200px, when it switches to four items per row.

Step 5: Set height to items

I’ve added height: 100%; to the .items so that .items element will equal heights as .flex-column element.

Leave a Reply

Notify of