وقتی صحبت از طراحی وب واکنش‌گرا می‌شود، استفاده از CSS Flexbox و Grid بسیار محبوب است. این دو ابزار قدرتمند به شما اجازه می‌دهند که به راحتی جدول‌ها و عناصر دیگر را به طور واکنش‌گرا و قابل تنظیم طراحی کنید. اما وقتی می‌خواهید یک جدول را با دو ستون طراحی کنید، کدام یک از این دو روش بهتر است؟
به‌طور کلی، Flexbox برای طرح‌های خطی و ساده بسیار مناسب است. اگر جدول شما بیشتر بر پایه تاریخ یا داده‌های متنی است، شاید Flexbox بتواند نیازهای شما را به خوبی پاسخ دهد. در مقابل، CSS Grid برای طرح‌بندی‌های پیچیده‌تر و چند وجهی مناسب است. برای مثال، اگر به تنظیمات چند بعدی و کنترل کامل بر روی ستون‌ها و ردیف‌ها نیاز دارید، Grid می‌تواند بهترین انتخاب باشد.
برای شروع، اجازه دهید یک نمونه جدول ساده با دو ستون با استفاده از Flexbox طراحی کنیم:
<div class="flex-table">
<div class="row"><div class="column">کالای 1</div><div class="column">قیمت</div></div>
<div class="row"><div class="column">کالای 2</div><div class="column">قیمت</div></div>
</div>
در این مثال با استفاده از Flexbox، جدول ما به سادگی به دو ستون تقسیم شده و هر ردیف دارای دو جزء است که به ترتیب قرار گرفته‌اند.
حال بگذارید به یک مثال با استفاده از CSS Grid بپردازیم:
<div class="grid-table">
<div>کالای 1</div>
<div>قیمت</div>
<div>کالای 2</div>
<div>قیمت</div>
</div>
اینجا از CSS Grid برای ایجاد یک جدول دو ستونی استفاده کرده‌ایم، که دارای دو ردیف ساده است.
بررسی خط‌به‌خط کد Flexbox
<div class="flex-table"> تمامی عناصر داخل این تگ بعنوان یک جدول در نظر گرفته می‌شوند، که با Flexbox کنترل می‌شود.
<div class="row"> هر یک از این divها یک ردیف جدید در جدول ایجاد می‌کنند.
<div class="column"> درون هر ردیف، هر کدم از این divها نشاندهنده یک ستون است.
بررسی خط‌به‌خط کد Grid
<div class="grid-table"> در اینجا بلوک اصلی Grid تعریف می‌شود که فرزندان آن به صورت اتوماتیک در ستون‌های مختلف جدول قرار می‌گیرند.
<div>کالای 1</div> آیتم مربوط به کالای اول در ستون اول قرار می‌گیرد.
<div>قیمت</div> این آیتم در ستون دوم و مرتبط با کالای اول قرار می‌گیرد.