في CSS Grid، تسمح لك السمتان grid-template-columns وgrid-template-rows بتحديد أسماء الأسطر وتتبع حجم أعمدة الشبكة والصفوف، على التوالي. يتيح دعم الاستيفاء لهذه الخصائص لتخطيطات الشبكة الانتقال بسلاسة بين الحالات، بدلاً من الانطباق عند نقطة منتصف الرسوم المتحركة أو الانتقال.
التوافق مع المتصفح
- 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
بفضل المساهمين في Microsoft، تمكّن متصفّح Chrome بدءًا من الإصدار 107 من إدخال قيمتَي 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.