نقل العناصر في CSS Grid Layout [الدليل]

باستخدام CSS الشبكة تخطيط وحدة في تصميم مواقع الويب يصبح أكثر قابلية للتنفيذ مع بدء المزيد من المتصفحات ادعمه. أثناء إنشاء تخطيطات تملأ خلايا الشبكة ، قد تأتي لحظة ، عندما تريد تحقيق أشياء أكثر تعقيدًا.

على سبيل المثال ، قد ترغب في ذلك التحرك قليلا في جميع أنحاء بعض العناصر الشبكة عالقة في مناطق الشبكة الخاصة بهم. قد ترغب أيضًا في ذلك نقلهم من حاوية الشبكة (الفائض) ، أو على بعضها البعض (تداخل) ، أو فقط ... إلى بعض المساحة الفارغة حولها.

لذا ، في هذا المنشور ، سأريك كيف يمكنك ذلك نقل عناصر الشبكة وترتيبها وتجاوزها وتداخلها وحجمها عند استخدام CSS Grid Layout Module.

إنشاء شبكة CSS

أولاً ، دعنا ننشئ شبكة CSS بسيطة بها صف واحد وثلاثة أعمدة.

في HTML ، نقوم بإنشاء مجموعة من divs حيث حاوية الشبكة يحتوي على عناصر الشبكة الثلاثة.

في CSS ، حاوية الشبكة لديه عرض: الشبكة. خاصية وعناصر الشبكة يملك شبكة منطقة يحدد أسماء مناطق عناصر الشبكة.

نحن أيضا أضف ال شبكة قالب والمناطق خاصية إلى حاوية الشبكة ، حيث يتم استخدام أسماء مناطق الشبكة تعيين مناطق الشبكة إلى خلايا الشبكة التي تمثلها.

جميع الأعمدة تأخذ حجم جزء واحد (الاب) من عرض الحاوية ، مما يضمن احتواء عناصر الشبكة.

 .شبكة الحاويات عرض: الشبكة ؛ مناطق قالب الشبكة: 'يسار الوسط يمينًا' ؛ شبكة أعمدة القوالب: كرر (3 ، 1fr) ؛ صفوف شبكة القوالب: 80 بكسل ؛ شبكة الفجوة: 5px ؛ العرض: 360 بكسل ؛ لون الخلفية: أرجواني ؛  .grid-left network-area: left؛  .grid-centre network-area: center؛  .grid-right network-area: right؛  .grid-container div background-color: lightgreen؛

تجاوز عناصر الشبكة

يمكنك جعل عنصر الشبكة تجاوز حاوية الشبكة الخاصة به إذا كان ذلك ضروريا للتخطيط. لتحقيق تأثير الفائض ، تحتاج فقط إلى استخدام حجم عمود مختلف:

 .شبكة الحاويات عرض: الشبكة ؛ مناطق قالب الشبكة: 'يسار الوسط يمينًا' ؛ أعمدة شبكة القوالب: تكرار (3 ، 150 بكسل) ؛ شبكة الفجوة: 5px ؛

ال مجموع العمود والفجوة الحجم أكبر من عرض الحاوية, الذي يؤدي إلى تجاوز عناصر الشبكة الحاوية الخاصة بهم.

عناصر الشبكة المتداخلة

ا البند الشبكة يمكن أن تتداخل (تغطية كاملة أو جزئية) عنصر شبكة آخر في الحالات التالية:

تم ضبطه على امتداد (أو أكثر) الخلية (الخلايا) الخاصة بعنصر شبكة آخر.
تم زيادة حجمها ، مما تسبب في تداخلها مع عنصر الشبكة القريب.
تم نقله فوق عنصر شبكة آخر.

سنناقش الحالتين الثانية والثالثة في وقت لاحق ، في “التحجيم” و “متحرك” الأقسام.

أولاً ، دعونا نرى الحالة الأولى عند عنصر الشبكة يمتد عبر واحد آخر.

يحتوي عنصر الشبكة في المركز امتدت على اليسار واحد, لذلك فقط عنصرين مرئيا على الشاشة.

 .شبكة مركز شبكة منطقة: مركز؛ شبكة العمود: 1/3 ؛

ال شبكة عمود و شبكة الصف الخصائص تعيين خطوط الشبكة بين عمود أو صف يحتاج إلى احتواء.

على الرسم البياني أدناه ، يمكنك أن ترى كيف شبكة العمود: 1/3 تعمل قاعدة CSS: العمود الأوسط يمتد بين خطوط الشبكة 1 و 3. نتيجة لذلك ، يتداخل العمود الأوسط مع العمود الأيسر.

نقل عناصر الشبكة

عن طريق التحرك ، يعني تحريك العناصر قليلاً حولها. إذا كنت ترغب تمامًا في نقل عنصر إلى خلية / منطقة شبكة أخرى ، فإنني أوصيك بتحديث رمز إنشاء الشبكة.

التنقل حول عناصر الشبكة أمر بسيط. مجرد استخدم ال حافة, ال تحول, أو ال الموقف: النسبية. الخصائص. انظر أدناه كيف يتم نقل العناصر باستخدام هذه الخصائص.

يمكن نقل عناصر الشبكة والشبكة اليمنى (كما هو موضح أعلاه) بالطرق التالية:

1. باستخدام `حافة`

تزيد الهوامش السالبة من أبعاد عناصر الشبكة ، بينما تقوم الهوامش الموجبة بقصها. باستخدام مزيج من الاثنين ، يمكنك نقل عناصر الشبكة حولها.

 .شبكة مركز شبكة منطقة: مركز؛ الهامش الأيسر: -10 بكسل ؛ الهامش الأيمن: 10 بكسل ؛ أعلى هامش: -10 بكسل ؛ الهامش السفلي: 10 بكسل ؛  .grid-right network-area: right؛ الهامش الأيسر: 10 بكسل ؛ الهامش الأيمن: -10 بكسل ؛ أعلى هامش: -10 بكسل ؛ الهامش السفلي: 10 بكسل ؛

2. باستخدام `تحول`

ال ترجمه() وظيفة المغلق تحريك عنصر على طول المحورين x و y. استخدامه جنبا إلى جنب مع تحول تسمح لك الخاصية بتغيير موضع عنصر الشبكة.

 .شبكة مركز شبكة منطقة: مركز؛ تحويل: ترجمة (-10 بكسل ، -10 بكسل) ؛  .grid-right network-area: right؛ تحويل: ترجمة (10px ، -10px) ؛

3. باستخدام `موضع`

باستخدام الموقف: نسبي حكم مع المحدد أعلى, الأسفل, اليسار, و حق يمكن استخدام الخصائص للتنقل حول عناصر الشبكة أيضًا.

 .شبكة مركز شبكة منطقة: مركز؛ الموقف: نسبي القاع: 10 بكسل ؛ اليمين: 10 بكسل ؛  .grid-right network-area: right؛ الموقف: نسبي القاع: 10 بكسل ؛ اليسار: 10 بكسل ؛

ترتيب عناصر الشبكة

يتم عرض عناصر الشبكة على الشاشة بالترتيب الذي تظهر به في شفرة مصدر HTML.

في القسم السابق ، عندما تم نقل العنصر الأوسط إلى اليسار ، تم وضعه في أعلى العنصر الأيسر بواسطة المستعرض. حدث هذا لأنه في HTML,

يأتي بعد

, ومن هنا فإن مركز العنصر هو المقدمة بعد (وأكثر) واحد اليسار.

ومع ذلك ، يمكننا ذلك تغيير عناصر شبكة الطلب باستخدام ض مؤشر أو ال طلب خصائص CSS.

باستخدام مؤشر z: 1 ؛ القاعدة ، عنصر الشبكة اليسرى حصلت على سياق التراص أعلى.

. شبكة اليسار منطقة الشبكة: يسار ؛ مؤشر z: 1 ؛

كما في وحدة CSS Grid Layout ، تغيير ترتيب العناصر في HTML لا يؤثر على تخطيط الشبكة, يمكنك أيضا وضع

قبل

في HTML. قم بذلك فقط ، إذا كان رمز HTML المحدث لا يضر بإمكانية الوصول.

عناصر الشبكة الحجم

إذا كنت تستخدم صفوفًا أو أعمدة بالحجم التلقائي لعنصر شبكة (باستخدام تلقاءي, الاب, غرام الوحدات) ، سوف يتقلص لتوفير مساحة للعنصر المجاور الذي زاد حجمه فقط اذا قال البند لم يكن بحجم تحول أو الهامش السلبي.

تذكر أنه في شبكة العينات الخاصة بنا ، تأخذ الأعمدة الثلاثة جزءًا واحدًا (الابالحاوية الشبكة. ألقِ نظرة على كيفية ظهور العناصر الثلاثة بعد تغيير حجم العنصر الأيسر بطريقتين مختلفتين.

1. الحجم مع `عرض` و `ارتفاع`

هنا ، نقوم بتغيير حجم العنصر الأيسر باستخدام عرض و ارتفاع الخصائص. نتيجة لذلك ، يبقى داخل حاوية الشبكة.

 .شبكة اليسار منطقة الشبكة: يسار ؛ العرض: 200 بكسل ؛ الارتفاع: 90 بكسل ؛

2. الحجم مع `تحول`

هنا ، نقوم بتغيير حجم العنصر الأيسر باستخدام تحول خاصية. نتيجة لذلك ، فإنه يفيض الحاوية ويختفي فجوة الشبكة أيضًا.

 .شبكة اليسار منطقة الشبكة: يسار ؛ convert: scalex (1.8)؛

موزيلا Sunbird التقويم

MP3 ليست ميتة

تحرك قرص scratch الخاص بك فوتوشوب لتحسين الأداء

المادة التالية

Mozilla Brick - مكتبة مكونات واجهة المستخدم المجانية لتطبيقات الويب

المقال السابق

MoviePass كان صفقة كبيرة ، الآن تحاول جاهدة حقا ليس ليكون