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" > 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 : 1 rem; text-align : center ; color : darkgreen; } .container { display : grid; margin-left : 35 rem; margin-right : 35 rem; grid-template-columns: repeat ( 2 , 1 fr); grid-template-rows: repeat ( 2 , 1 fr); } .col { border : 1px solid black ; background-color : cyan; padding : 1 rem; text-align : center ; } |
Output:
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
Contact Us