Web Developer, CSS

How to Create Equal Width DIVs with CSS

In this tutorial we will show how to create equal width DIVs with CSS. We also will look at how to animate that flex width for an improved user experience.
Published: 04/21/2022 7:03 am
Updated: 04/21/2022 7:13 am
#equal width divs #how to #css trick #css flex #flex width
April 2022 | Work Heavy

Overview

Sometimes when building websites we need build a grid for better presentation. More importantly, we need to make this grid responsive and have widths relative to the screen width. In this tutorial we will show how to create equal width DIVs with CSS. We also will look at how to animate that width for an improved user experience. If you just want the source code, you can find that here

Create HTML File for Demo

First let's create the basic HTML file for this demo. Below is just a simple web page with some initial CSS and DIVs. The class demo-container is just for the sake of demo not for the grid. The box class is our base style for the columns, we will add more style later. The box-container class is for the row. Below the style is some basic HTML, we have one 5 row with 5 columns.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Equal Width Divs Example</title>

        <style>
            body{
                margin:0;
            }

            .box-container{

            }

            .box{

            }


        </style>
    </head>
    <body>

    <div class="box-container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

    </body>
</html>

Adding the Flex Properties

Now we will add the important style. For the row, aka the box-container, we will give it a width of 100% and set the display to flex. The flex display setting is key to accomplishing equal widths. Then for the columns, which use the box class, we need to set the flex property to 1. By setting flex to 1, all the box divs will have equal widths relative to the parent div. The rest of the style within the box class is more so for the demo. We set a height, a margin, and a background image so that we can clearly see the columns. This is also perhaps close to a common use class when building a grid of images on a web page.

<style>
    body{
        margin:0;
    }

    .box-container{
        width:100%;
        display: flex;
    }

    .box{
        flex: 1;
        height:150px;
        margin: 2px;
        background-image: url('/workheavy-web-dev-examples/img/keyboard.png');
        background-size: cover;
        background-position: center;
    }
</style>

Here are our equal width divs in action.

Equal width divs on HTML page

Applying the Animations

Now that we have our basic equal width divs, let's add an animation to that width. First we will create a keyframes called my_flex_anim. In this keyframes, we just have 2 state, one at 0% and the other at 100%. At 0% we have flex:1 and at 100% we have flex:2. This means we want the width of the element to double in size. Next we add style for the hover action of our box. Here we simply change the cursor and add the my_flex_anim animation. Adding 2s forwards on the animation means that it will cycle through the animation in 2s but hold the last state.

<style>
    body{
        margin:0;
    }

    .box-container{
        width:100%;
        display: flex;
    }

    .box{
        flex: 1;
        height:150px;
        margin: 2px;
        background-image: url('/workheavy-web-dev-examples/img/keyboard.png');
        background-size: cover;
        background-position: center;
    }

    .box:hover{
        cursor: pointer;
        animation: my_flex_anim 2s forwards;
    }


    @keyframes my_flex_anim {
        0% {flex: 1;}
        100% {flex: 2;}
    }


</style>

Here is our div in action when you hover over it.

Equal width div animation on hover on HTML page

Summary

Now you know how to create equal width divs with CSS. It's fairly easy, you just need the display property set to flex on the parent and set the flex property to 1 on the children. This foundation is great for when you want to design web pages with a grid, you can build an image matrix, a simple side by side comparison, or anything else you can think of! For complete demo source, you can find the code here.