Creating Equal Height Columns Using Flex

Creating Equal Height Columns using Grid

This is one of the ways to achieve an equal height column. Using the display of type “flex” inside the className1 and setting flex to 1 inside className2 stretches to fill the container and have the same height.

Using Flex Syntax:

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Creating Equal Height Columns using Flex Example:

This example uses the flex-box approach to create an equal-height column.

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <h1 class="name">
        w3wiki
    </h1>
    <p class="name">
        EQUAL_HEIGHT_COLUMN 
    </p>
    <div class="container">
        <div class="col">
            <p>column 1</p>
        </div>
        <div class="col">
            <p>column2</p>
        </div>
    </div>
</body>
</html>

CSS

.name {
    margin-top: 1rem;
    text-align: center;
    color: darkgreen;
}
.container {
    display: flex;
    margin-left: 20rem;
    margin-right: 20rem;
}
.col {
    text-align: center;
    flex: 1;
    border: 1px solid black;
    background-color: aquamarine;
    padding: 1rem;
}

Output:

Equal Height Columns using Flex

Explanation:

In the above example we are using display: flex on the container, turning it into a flexible layout. This lets elements inside adjust their size based on available space.
Each column element has flex: 1. This tells flexbox to divide the container’s width equally between the two columns, making them the same size.
If content inside a column is different, flexbox adjusts column sizes to fit all content comfortably.

How to Create Equal Height Columns in CSS ?

CSS represents how your HTML elements need to be displayed on a web browser. It can control a lot of one’s work as it can control the layout of multiple web pages using a single CSS file, which is also called an external stylesheet. Using CSS property, we can set the height of the column equal using the following methods.

Table of Content

Creating Equal Height Columns Using Flex
Creating Equal Height Columns using Grid
Creating Equal Height Columns using Table property

Tags:

#CSS #Web Technologies