In this article, we will teach you how to create side-by-side divs with the same height using CSS. We have given three simple ways to ensure that all divs have the same height and width and remain responsive.
Let's begin!
1. Using Display: grid;
With Display: grid, you can arrange div elements side by side, and their heights adjust based on content length. This layout method allows for responsiveness without needing a media query.
By setting 'grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))' in the parent element's style, all boxes automatically align and remain responsive.
<head>
<style>
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px;
}
.child {
padding: 10px;
border: solid;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae, accusamus.</div>
<div class="child">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit et, veritatis
iure laboriosam neque aliquam adipisci nisi assumenda, laudantium mollitia rem aut obcaecati quasi
illo sequi ratione consectetur ducimus a, animi necessitatibus nihil aspernatur possimus. Itaque, qui sunt
nisi vel ut nostrum, tempore voluptas dolorum, earum blanditiis iure reprehenderit similique?</div>
<div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit obcaecati nulla pariatur
iusto optio? Exercitationem, distinctio voluptatum veniam asperiores voluptatem necessitatibus,
eveniet natus sint maxime unde tenetur earum debitis velit!</div>
</div>
</body>
If you create four boxes instead of three, all four boxes will automatically line up next to each other, ensuring a responsive layout.
2. Using Display: flex
To use the Flexbox method, set the CSS property display: flex for the parent container. This aligns the div elements horizontally, adjusting their height based on the content inside.
For responsive design, consider using media queries to switch to display: grid for smaller screens, ensuring the boxes stack vertically when necessary.
<head>
<style>
.parent {
display: flex;
gap: 10px;
}
.child {
flex: 3;
padding: 10px;
border: solid;
}
@media screen and (max-width:650px) {
.parent {
display: grid;
row-gap: 10px;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae, accusamus.</div>
<div class="child">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit et, veritatis
iure laboriosam neque aliquam adipisci nisi assumenda, laudantium mollitia rem aut obcaecati quasi
illo sequi ratione consectetur ducimus a, animi necessitatibus nihil aspernatur possimus. Itaque, qui sunt
nisi vel ut nostrum, tempore voluptas dolorum, earum blanditiis iure reprehenderit similique?</div>
<div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit obcaecati nulla pariatur
iusto optio? Exercitationem, distinctio voluptatum veniam asperiores voluptatem necessitatibus,
eveniet natus sint maxime unde tenetur earum debitis velit!</div>
</div>
</body>3. Using Display: table-cell;
To align div elements side by side using the display: table-cell method, apply this CSS property to the child elements. This method sets the height of all elements based on their content length.
For responsiveness, add "display: grid" and "width: auto" to the child elements within a media query.
<head>
<style>
.child {
display: table-cell;
padding: 10px;
border: solid;
width: 33%;
}
@media screen and (max-width:650px) {
.child {
display: grid;
width: auto;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae, accusamus.</div>
<div class="child">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit et, veritatis
iure laboriosam neque aliquam adipisci nisi assumenda, laudantium mollitia rem aut obcaecati quasi
illo sequi ratione consectetur ducimus a, animi necessitatibus nihil aspernatur possimus. Itaque, qui sunt
nisi vel ut nostrum, tempore voluptas dolorum, earum blanditiis iure reprehenderit similique?</div>
<div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit obcaecati nulla pariatur
iusto optio? Exercitationem, distinctio voluptatum veniam asperiores voluptatem necessitatibus,
eveniet natus sint maxime unde tenetur earum debitis velit!</div>
</div>
</body>
Using these methods, you can arrange div elements side by side in a responsive manner. Many developers prefer using display: grid because it avoids a need for media queries.
Display: grid is suitable for building large or complex layouts, while display: flex is more appropriate for smaller projects. It is important to understand the difference between these two.
If you have any questions regarding web development, you can ask them in the question box given below, and you will get the answer ASAP!