Virtueinfo 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>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="flex-row"> <div class="flex-column"> <div class="items"> <h2>What is Lorem Ipsum?</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> <div class="flex-column"> <div class="items"> <h2>Why do we use it?</h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div> <div class="flex-column"> <div class="items"> <h2>Where does it come from?</h2> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p> </div> </div> </div> |
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.
|
1 2 3 4 5 6 7 8 |
.flex-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } |
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.
|
1 2 3 4 5 6 7 |
.flex-column { width: 100%; padding: 15px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@media (min-width: 768px) { .flex-column { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media (min-width: 992px) { .flex-column { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } } @media (min-width: 1200px) { .flex-column { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } |
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.
|
1 2 3 4 5 |
.items { background: #ddd; padding: 15px 20px; height: 100%; } |
This information has been very helpful thanks for sharing this post.