توجه إلى CSS Grout Lay Fr

ال CSS الشبكة تخطيط وحدة تم شحنها مع وحدة CSS جديدة دعا الاب وحدة. واضحة ومباشرة كما يمكن أن يكون, الاب هل اختصار للكلمة “جزء”. تتيح الوحدة الجديدة تقسيم الشبكة بسرعة إلى أعمدة أو صفوف متناسبة. نتيجة لذلك ، إنشاء شبكات استجابة ومرونة بالكامل يصبح ما يقرب من نسيم.

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

الاستخدام الأساسي

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

ويتكون HTML الانتماء من ستة divs مع علامة .صندوق صف دراسي, داخل .غلاف شعبة.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

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

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

ال شبكة الفجوة خاصية يضيف شبكة 10px بين الصناديق. إذا كنت لا تريد أي فجوة فقط إزالة هذه الخاصية.

 .غلاف عرض: شبكة؛ أعمدة شبكة القوالب: 1fr 1fr 1fr؛ صفوف شبكة القوالب: 200 بكسل × 200 بكسل ؛ شبكة الفجوة: 10px ؛  .box color: white؛ محاذاة النص: المركز ؛ حجم الخط: 30 بكسل ؛ الحشو: 25 بكسل ؛  

لاحظ أن CSS أعلاه لا يحتوي على بعض التصميم الأساسي مثل ألوان الخلفية. يمكنك العثور على الرمز الكامل في العرض التوضيحي في نهاية المقالة.

تغيير النسبة

بالطبع ، لا يمكنك استخدام 1: 1: 1 فقط أي نسبة تريد. أدناه ، اعتدت 1: 2: 1 الكسور التي تقسم أيضا الفضاء إلى ثلاثة أعمدة لكن العمود الأوسط سيكون ضعف العرض كما الاثنان الآخران.

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

 .غلاف عرض: شبكة؛ أعمدة شبكة القوالب: 1fr 2fr 1fr؛ صفوف شبكة القوالب: 200 بكسل × 200 بكسل ؛ شبكة الفجوة: 40 بكسل ؛  

دمج الاب مع وحدات CSS الأخرى

يمكنك دمج ال الاب وحدة مع أي وحدات CSS أخرى كذلك. على سبيل المثال ، في المثال أدناه ، لقد استخدمت 60 ٪ 1fr 2fr نسبة لشبكة بلدي.

فكيف يعمل هذا؟ ال المتصفح يعين 60 ٪ من عرض منفذ العرض إلى العمود الأول. ثم ، يقسم بقية المساحة إلى كسور 1: 2.

ويمكن أيضا أن يكون الشيء نفسه كما كتب 60٪ 13.33333٪ 26.66667٪. ولكن بصراحة ، لماذا يريد أي شخص استخدام هذا التنسيق؟ ميزة كبيرة من وحدة الكسر هو أنه يحسن قراءة التعليمات البرمجية. علاوة على ذلك ، إنه دقيقة تماما, حيث لا يزال التنسيق النسبي يضيف فقط إلى 99.9999٪.

 .غلاف عرض: شبكة؛ شبكة أعمدة القوالب: 60٪ 1fr 2fr؛ صفوف شبكة القوالب: 200 بكسل × 200 بكسل ؛ شبكة الفجوة: 10px ؛  

بصرف النظر عن النسب المئوية, يمكنك أيضًا استخدام وحدات CSS أخرى جنبا إلى جنب مع وحدة الكسر ، على سبيل المثال حزب العمال, بكسل, م, و عيني.

إضافة مسافة بيضاء مع الاب

ماذا لو كنت لا تريد التصميم الخاص بك أن تشوش و أضف بعض المساحة البيضاء لشبكتك؟ وحدة الكسر لديها أيضا حل سهل لذلك.

كما ترون ، هذه الشبكة لديه عمود فارغ بينما لا يزال يحتفظ بجميع الصناديق الستة. بالنسبة لهذا التصميم ، نحتاج إلى تقسيم المساحة لأعلى في أربعة أعمدة بدلا من ثلاثة. لذلك ، نحن نستخدم 1fr 1fr 1fr 1fr قيمة لل شبكة قالب الأعمدة خاصية.

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

 .غلاف عرض: شبكة؛ أعمدة شبكة القوالب: 1fr 1fr 1fr 1fr؛ صفوف شبكة القوالب: 200 بكسل × 200 بكسل ؛ شبكة الفجوة: 10px ؛ مناطق قالب الشبكة: "box-1 box-2.. box-3" "box-4 box-5. box-6"؛  .box-1 network-area: box-1؛  .box-2 network-area: box-2؛  .box-3 network-area: box-3؛  .box-4 network-area: box-4؛  .box-5 network-area: box-5؛  .box-6 network-area: box-6؛  

المناطق البيضاء ليس بالضرورة أن تشكل عمودًا, هم يمكن أن يكون في أي مكان في الشبكة.

ال كرر() وظيفة

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

 .غلاف عرض: شبكة؛ شبكة أعمدة القوالب: كرر (3 ، 1fr) ؛ / * network-template-columns: 1fr 1fr 1fr؛ * / grid-template-rows: 200px؛ شبكة الفجوة: 10px ؛  

ال كرر (3 ، 1fr) بناء الجملة النتائج في نفس التصميم مثل 1fr 1fr 1fr. التخطيط أدناه هو نفس المثال الأول.

اذا أنت زيادة المضاعف داخل ال كرر() وظيفة سيكون لديك المزيد من الأعمدة. على سبيل المثال, كرر (6 ، 1fr) النتائج في ستة أعمدة متساوية. في هذه الحالة ، كل صناديقنا سيكون في نفس الصف, مما يعني أنه يكفي استخدام قيمة واحدة فقط (200 بكسل) لـ شبكة قالب الصفوف خاصية.

 .غلاف عرض: شبكة؛ أعمدة شبكة القوالب: تكرار (6 ، 1fr) ؛ شبكة القوالب الصفوف: 200 بكسل. شبكة الفجوة: 10px ؛  

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

 .غلاف عرض: شبكة؛ شبكة أعمدة القوالب: كرر (3 ، 1fr) كرر (3 ، 2fr) ؛ شبكة القوالب الصفوف: 200 بكسل. شبكة الفجوة: 10px ؛  

بامكانك ايضا دمج كرر() مع وحدات CSS الأخرى. على سبيل المثال ، يمكنك استخدام 200px كرر (4 ، 1fr) 200px كرمز صالح.

إذا كنت مهتما في كيفية إنشاء تخطيطات معقدة مع وحدة الشبكة المغلق ، و كرر() وظيفة و الاب تحتوي الوحدة Rachel Andrew على مدونة مثيرة للاهتمام حول كيفية القيام بذلك.

عرض تجريبي

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