How to Create Equal Height Columns in CSS ?
Last Updated :
07 Mar, 2024
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.
Creating Equal Height Columns Using Flex
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">
GeeksforGeeks
</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.
Creating Equal Height Columns using Grid
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">
GeeksforGeeks
</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.
Creating Equal Height Columns using Table propertyÂ
In this approach, we are using the Table property to create an equal height column in CSS.in which we use display: table; on the parent elementand on chlid elements.
Creating Equal Height Columns using Table property Syntax:
border: table_width table_color;
Creating Equal Height Columns using Table property Example:
Here we are using the above method.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: table;
width: 50%;
}
.column {
display: table-cell;
padding: 16px;
background-color: skyblue;
}
.column:nth-of-type(2n-1) {
background-color: gray;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3 style="color: green;">
EQUAL_HEIGHT_COLUMN
</h3>
<div class="container">
<div class="column">
<p>Column 1</p>
</div>
<div class="column">
<p>Column 2</p>
</div>
<div class="column">
<p>Column 3</p>
</div>
</div>
</body>
</html>
|
Output:
Equal Height Columns using Table propertyÂ
Explanation:
- In the above example we are creating a parent div with three child div.
- We are using display: table style to parent div and display:table-cell; to child divs.
- CSS sets the container to display as a table and each column as a table cell, ensuring equal height.
- Alternate columns have different background colors defined using nth-of-type selector to style them differently.
Share your thoughts in the comments
Please Login to comment...