Creating Equal Height Columns using Grid

Creating Equal Height Columns Using Flex

Creating Equal Height Columns using Table property

Using display to the grid will enable to use of grid and the property grid-template-columns will create columns and grid-template-rows will set the column to equal height.

Creating Equal Height Columns using Grid Syntax:

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell">...</div>
    ..........
  </div>
</div>

Creating Equal Height Columns using Grid Example:

This example uses the CSS grid property 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: grid;
    margin-left: 35rem;
    margin-right: 35rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.col {
    border:1px solid black;
    background-color: cyan;
    padding: 1rem;
    text-align: center;
}

Output:

Equal Height Columns using Grid

Explanation:

In this example we are using display: grid on the container, turning it into a grid layout. This allows rows and columns to be defined for precise arrangement.
Then grid-template-columns: repeat(2, 1fr) creates two columns, each occupying 1 fraction (fr) of the available space. This ensures they have the same width.
Similarly, grid-template-rows: repeat(2, 1fr) defines two rows, each taking 1fr of the container’s height. This makes them the same height.

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