CSS Grid در عمل: چیدمان‌های واکنش‌گرا بدون دردسر

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

<div class="layout">
  <article>…</article>
  <aside>فهرست مطالب</aside>
</div>

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 2rem;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}