طرح بندی شبکه متحرک CSS

براموس

در CSS Grid، ویژگی های grid-template-columns و grid-template-rows به شما امکان می دهد نام خطوط و اندازه ردیابی ستون ها و ردیف های شبکه را تعریف کنید. پشتیبانی از درون یابی برای این ویژگی‌ها به طرح‌بندی‌های شبکه اجازه می‌دهد به‌جای اینکه در نیمه‌ی راه یک انیمیشن یا انتقال قرار بگیرند، به آرامی بین حالت‌ها جابه‌جا شوند.

Browser Support

  • کروم: 107.
  • لبه: 107.
  • فایرفاکس: 66.
  • سافاری: 16.

درون یابی ارزش در CSS

در CSS می‌توانید با استفاده از ویژگی transition ، خصوصیات را از یک مقدار به مقدار دیگر انتقال دهید.

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

موتور رندر به طور خودکار نوع ارزش ویژگی مورد نظر را تشخیص می دهد و از آن اطلاعات برای انتقال هموار به مقدار جدید استفاده می کند.

به عنوان مثال:

  • تغییر opacity از 0 به 1 این یک درونیابی عددی است.
  • انتقال background-color از white به black ؟ محو شدن بین رنگ های مبدا و مقصد.
  • width انتقال درون یابی عددی، تبدیل واحدها در طول مسیر در صورت نیاز.

همین امر در مورد انیمیشن های CSS نیز صدق می کند، جایی که مرورگر درون یابی ارزش را بین فریم های کلیدی انجام می دهد.

متحرک سازی grid-template-columns و grid-template-rows

طرح‌بندی‌های شبکه‌ای همچنین می‌توانند به آرامی بین حالت‌ها جابه‌جا شوند، به‌جای اینکه در نیمه راه یک انیمیشن یا انتقال قرار بگیرند.

در نسخه ی نمایشی زیر یک شبکه چندین آواتار را نشان می دهد. برای حفظ فضا، آواتارها با محدود کردن عرض هر ستون با استفاده از grid-template-columns روی هم قرار می گیرند. در حالت شناور، به هر ستون فضای بیشتری داده می شود.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

با وجود ویژگی transition ، شبکه به آرامی بین مقادیر درون یابی می شود.

این افکت همچنین برای انیمیشن هایی اعمال می شود که مقادیر grid-template-columns یا grid-template-rows تغییر می دهند.