در طراحی وب، هماهنگ‌سازی ارتفاع دو المان <div> یکی از موارد اصلی ایجاد طرح‌های هم‌راستا و زیبا است. این موضوع به خصوص در زمان کار با layoutهایی که دارای ستون‌های متعدد هستند، بیش از پیش اهمیت پیدا می‌کند. استفاده از Flexbox و Grid می‌تواند به این مسئله کمک کند و تفاوت‌های ناخواسته در ارتفاع را به راحتی برطرف نماید. در ادامه، به توضیحات بیشتری درباره نحوه‌ی استفاده از این ویژگی‌ها خواهیم پرداخت.
برای شروع، بهترین راهکار استفاده از Flexbox است. Flexbox به شما امکان می‌دهد که ارتفاع المان‌های فرزند را به صورت خودکار و براساس بزرگترین المان، هماهنگ کنید. این ویژگی به طور خاص در کم کردن نیاز به جاوااسکریپت و کاهش زمان بارگزاری صفحه کمک می‌کند.
همچنین با استفاده از Grid در CSS، می‌توانید به سادگی المان‌ها را در یک طرح شبکه‌ای قرار دهید، به طوری که ارتفاع همه ی المان‌ها در همان صف تنظیم شود. این رویکرد نه تنها کد های شما را تمیزتر می‌کند، بلکه خوانایی بهبود یافته‌ای به کل پروژه می‌دهد.
در بعضی کاربردها، ممکن است لازم باشد از CSS ساده و ویژگی‌هایی مانند min-height یا حتی محاسبه ارتفاع با درصد ها یا vh استفاده کنید. هرچند این روش‌ها ممکن است دقت Flexbox یا Grid را نداشته باشند، اما هنوز در پروژه‌های کوچک و ساده می‌توانند کارآمد باشند.
در مثال زیر، به بررسی نحوه‌ی استفاده از Flexbox برای ایجاد المان‌های div با ارتفاع یکسان می‌پردازیم:
<style>
.container {
display: flex;
}
.item {
flex: 1;
background-color: lightblue;
margin: 10px;
padding: 20px;
}
</style>
<div class="container">
<div class="item">Content 1</div>
<div class="item">Content 2</div>
</div>
این کد مانند زیر کار می‌کند:
.container:این کلاس به عنوان والد، Flexbox ایجاد می‌کند تا انعطاف‌پذیری به فرزندان منتقل شود.
.item:این کلاس به فرزندان خاصیت
flex: 1; می‌دهد تا به صورت مساوی فضا را پر کنند و ارتفاع یکسانی بگیرند.background-color:رنگ پس‌زمینه‌ای برای بهبود درک و نمایش ویژوال اعمال شده است.