یکی از روش‌های مهم در طراحی واکنش‌گرا، استفاده از Grid View هست.
Grid View به ما کمک می‌کنه عناصر صفحه (مثل کارت‌ها، عکس‌ها یا محصولات) به شکل منظم در ستون‌ها و ردیف‌ها نمایش داده بشن و روی موبایل و دسکتاپ درست بچینیم.

۱. کانتینر گرید

.row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ۴ ستون مساوی */
  gap: 10px;
}

📌 این کد یه ردیف می‌سازه با ۴ ستون مساوی.

۲. آیتم‌های گرید

.column {
  background: lightblue;
  padding: 20px;
  text-align: center;
}

📌 هر ستون یک باکس ساده میشه.

۳. واکنش‌گرایی با Media Query

/* برای تبلت */
@media (max-width: 768px) {
  .row {
    grid-template-columns: repeat(2, 1fr); /* دو ستون */
  }
}

/* برای موبایل */
@media (max-width: 480px) {
  .row {
    grid-template-columns: 1fr; /* یک ستون */
  }
}

📌 حالا گرید توی دسکتاپ ۴ ستون داره، توی تبلت ۲ ستون و توی موبایل ۱ ستون.

۴. مثال کامل

<div class="row">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

نکته

• با grid-template-columns می‌تونیم تعداد ستون‌ها رو مشخص کنیم.

• با media query ستون‌ها متناسب با عرض صفحه تغییر می‌کنن.

• Grid View یکی از اصول اصلی طراحی فروشگاه‌ها و گالری‌های واکنش‌گرا هست.