Flexbox وGrid هما أداتا CSS الحديثتان لتنسيق العناصر وترتيبها على الصفحة: توزيعها، ومحاذاتها، والمسافات بينها.

Flexbox: صف أو عمود

.menu {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

مناسب للقوائم وصفوف الأزرار ومحاذاة عناصر قليلة.

Grid: صفوف وأعمدة معًا

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

مناسب لشبكات البطاقات وتخطيط الصفحة كاملًا.

قبلهما كان المطورون يستخدمون float وحيلًا كثيرة. اليوم تغنيك هاتان الأداتان عن معظم ذلك.