كيفية إتقان شبكة CSS بكفاءة في لمح البصر

كيفية إتقان شبكة CSS بكفاءة - في لمح البصر

تعرّف على نسبة 20٪ التي تحتاجها للحصول على كفاءة بنسبة 80٪ باستخدام CSS Grid.

المقدمة

هذه ليست المقالة لتعلم "كل شيء" حول شبكة المغلق.

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

في الأجزاء الأربعة من هذه المقالة ، سوف أعرض عليك نسبة 20٪ التي تحتاجها للحصول على كفاءة بنسبة 80٪ من خلال تصميم CSS Grid.

دعنا نحفر!

لماذا فقط 20 ٪؟

حيثما أمكن ، يبحث مبرمج عن الكفاءة - المخرج البطيء المفترض.

تخطيط شبكة CSS معقد. في رأيي ، أكثر تعقيدا من Flexbox. (mehn ، استغرق الأمر أسابيع للتعرف على flexbox)
ليس ذلك لأنه "صعب" ولكن شبكة CSS لديها 18 خاصية جديدة بالإضافة إلى مفاهيم أخرى لم تسمع بها من أي مكان آخر في CSS.

لذلك ، هل تحتاج إلى كل هذه الخصائص الجديدة الآن؟ الآن؟

لا ، أنت لا!

فقط تعلم الشيء لتحصل على النتائج الآن. يمكنك المضي قدما لمعرفة الخصائص الأخرى في وقت لاحق. هذا هو التعريف الخاص بي "الكفاءة مع تصميم CSS Grid"

1. ما هو مخطط شبكة CSS؟

إذا كنت جديدًا في التخطيطات في CSS ، فقد يبدو تخطيط شبكة CSS غريبًا بالنسبة لك.

هل سمعت من Flexbox؟

أرغب في عرض تصميم CSS Grid كشقيق أقدم (أو أصل) من Flexbox.

لقد كانت معالجة التخطيطات في CSS صعبة وكربي. جلبت Flexbox بعض الهواء النقي - لكن شبكة CSS أفضل.

ما سنبنيه.

سوف تتعلم كيفية تطبيق معرفتك بنسبة 20 ٪ على بناء نسخة من تخطيط تطبيق الموسيقى استجابة.

تطبيق موسيقي سريع الاستجابة وموسيقى مجنونة

الجزء 1: 10 ٪ تحتاج إلى معرفته - المصطلحات الأساسية

دعونا نلقي نظرة على الأشياء الأولى التي يجب أن تعرفها تمامًا.

ما هو حاوية الشبكة؟

كل موقع ، أو تخطيط تطبيق تقوم بإنشائه (أو شاهدته) هو في الأساس مربعات موضوعة داخل حدود محددة.

وصور متحركة من كريس bannister

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

ستكون على دراية بذلك إذا كنت تستخدم برامج تصميم مثل أدوبي فوتوشوب أو رسم.

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

ما هو خط الشبكة؟

افترض قليلاً أن لديك شبكة كاملة مثل:

تخطيط الشبكة المفترض

يشتمل التصميم على حاوية شبكة بها عدد من عناصر الشبكة الموضوعة بشكل مثالي (عناصر فرعية داخل الشبكة)

قليلا من التفسير

خطوط الشبكة هي الخطوط الأفقية والعمودية التي تقسم الشبكة.

ما هي خلية الشبكة؟

خلية الشبكة هي أصغر وحدة مساحة في تخطيط الشبكة. هو أي مساحة يحدها أربعة خطوط الشبكة.

قد يشار إلى

شبكة المنطقة

قد تكون مساحة الشبكة صغيرة مثل المساحة الموجودة داخل خلية الشبكة (كما هو موضح أعلاه). قد تكون أيضًا كبيرة مثل جميع الخلايا داخل الشبكة.

في الصورة أدناه ، المنطقة التي تغطيها الخلايا الأربع هي منطقة شبكية.

ما هو مسار الشبكة

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

تظهر الصورة أدناه مثال على مسارات الشبكة.

مسارات الشبكة

لذلك ، لقد تم حل الجزء الأول.

الجزء 2: "الآخر" 10 ٪ تحتاج إلى معرفته - شبكة CSS ، خطوات الطفل.

الآن بعد أن فهمت المصطلحات الأساسية ، مثل الطفل المغامر ، فلنركل!

كيف تعرف الشبكة؟

تمامًا مثل Flexbox ، كل شيء يبدأ بخط واحد. عرض: شبكة أو عرض: شبكة مضمّنة لإصدار مضمن.

على سبيل المثال ، لجعل div معينة حاوية شبكة ، قم بما يلي:

div {
  عرض: الشبكة.
}

كيف يمكنك إنشاء أعمدة وصفوف؟

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

إذا كيف يمكنك استخدام هذه؟ بسيط جدا.

تحدد أعمدة شبكة القوالب موضع الأعمدة. شبكة القوالب الصفوف يحدد موضع الصفوف.

يمكنك تمرير قيم الطول في هذه الخصائص ، وتقوم بإنشاء مسارات للصف والعمود داخل حاوية الشبكة.

انظر مثال:

شبكة أعمدة القوالب: 100px 200px 300px

سيؤدي ذلك إلى إنشاء 3 أعمدة جديدة داخل حاوية الشبكة. الأول بطول 100 بكسل ، والآخر ، 200 بكسل والأخير ، 300 بكسل.

شبكة أعمدة القوالب: 100px 200px 300px

شبكة القوالب الصفوف: 100px 200px 300px

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

شبكة القوالب الصفوف: 100px 200px 300px

الآن ضعها معًا ، وستحصل على شبكة كاملة - مع تحديد الصفوف والعمود.

شبكة أعمدة القوالب: 100px 200px 300px
شبكة القوالب الصفوف: 100px 200px 300px

الجزء 3: الوقت الكود - CSS الشبكة ، التدريب العملي على

الآن دعنا نأخذ خطوات الطفل لبناء نسخة من تطبيق الموسيقى الشهير ، الموسيقى الصغيرة

لتطوير سريع ، وأود أن استخدام Codepen. قم بتدوير مشروع جديد ، ودعنا نتصدع.

كيفية إنشاء إعداد الشبكة الأساسية للموسيقى Catty

أعتقد أن لديك مشروع codepen الأساسي قيد التشغيل الآن.

سنبدأ باستخدام مستند html أساسي للغاية.


   <جانبا> 
   <الرئيسية> 
   <تذييل> 

هناك القليل من التبصر في اختيار هذا الهيكل. ستفهم قريبًا

الآن نمط المستند.

الجسم {
   عرض: الشبكة.
   دقيقة الطول: 100 ٪
}

سيؤدي هذا إلى بدء تشغيل سياق تنسيق الشبكة عن طريق جعل الجسم حاوية شبكة

الآن يمكننا المضي قدمًا لتحديد هيكل الصفوف والأعمدة داخل الشبكة.

كيفية إنشاء الصفوف والأعمدة للموسيقى Catty

من السهل جداً إنشاء الصفوف والأعمدة.

التصميم النهائي الذي نطلقه هو:

التصميم النهائي الذي نسعى إليه.

ومع ذلك ، فإن الإعداد الأولي للشبكة الذي نحتاج إليه هو شبكة من صفين وعمودين.

إعداد الشبكة الأولي

فيما يلي بعض الأشياء التي يجب ملاحظتها حول إعداد الشبكة هذا

الأعمدة:

  1. يجب أن يحتوي العمود الأول على عرض ثابت - على سبيل المثال ، 50 بكسل
  2. يجب أن يملأ العمود الثاني العرض المتبقي في الشبكة.

الصفوف:

3. يجب أن يكون للصف الثاني ارتفاع ثابت - على سبيل المثال ، 100 بكسل

4. يجب أن يملأ الصف الأول أيضًا الارتفاع المتبقي داخل الشبكة.

حل الرجل العادي.

إذا لم تكن لديك خبرة كبيرة في CSS ، فمن المحتمل أن تكتب هذا:

الجسم {
   ...
   صفوف شبكة القوالب: 100٪ 100 بكسل ؛
   شبكة أعمدة القوالب: 50 بكسل × 100٪ ؛
}

تكمن المشكلة في ذلك في أنك قمت بإنشاء شبكة بطريق الخطأ يبلغ إجمالي عرضها وارتفاعها 100٪ + 50 بكسل / 100٪ + 100 بكسل

نريد عرضًا إرتفاعًا وإرتفاعًا تمامًا بنسبة 100٪ ، لذا فإن هذا النهج خاطئ.

حل الشخص "الذكي".

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

الجسم {
   ...
   صفوف شبكة القوالب: calc (100٪ - 100px) 100px؛
   شبكة أعمدة القوالب: 50px calc (100٪ -50px)

هذا ذكي جدا. لكن لديها مشكلة واحدة - لا يمكن حلها.

على سبيل المثال ، إذا كان عليك تغيير أيٍ من العروض الثابتة لبعض الأسباب ، فيجب عليك دائمًا تغيير تعريف calc.

الحل الفعال

لحسن الحظ ، تمتلك CSS Grid وحدة جديدة تعمل على حل مشكلتنا بشكل أنيق. الوحدة الكسرية (الاب)

وحدة كسور يحل مشكلة توزيع الفضاء تلقائيا.

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

إذا لسبب ما قمت بإضافة المزيد من العناصر - لا تقلق. ستقوم وحدة fr بإعادة توزيع المساحة بالتساوي.

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

إليك ما أعنيه:

الجسم {
   ...
   شبكة القوالب الصفوف: 1fr 100px؛
   شبكة أعمدة القوالب: 50px 1fr؛

وهذا هو - فعلت!

إذا كنت لا تزال مشوشًا مع وحدة fr ، فالرجاء التحقق من ذلك ، وحدة CSS Fractional (Fr) بلغة واضحة وسهلة الاستخدام. يستغرق سوى 3 دقائق.

تسمية العناصر وتحديد المواقع حسب مناطق الشبكة

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

الهدف من هذا القسم هو تعلم كيفية وضع عناصر الشبكة باستخدام مناطق الشبكة.

إذا كنت تتذكر من قسم سابق ، فإن مساحة الشبكة هي أي منطقة يحدها 4 خطوط شبكة.

قد يشار إلى

كيف تبدأ في استخدام مناطق الشبكة؟

المكان المنطقي للبدء هو تسمية مناطق الشبكة.

اسمحوا لي أن أشرح ذلك.

النظر في كتلة التعليمات البرمجية أدناه:

3 divs - بسيطة. بالمناسبة ، من الأفضل استخدام العلامات الرئيسية وتذييل الصفحات جانباً. سأبقي الأشياء بسيطة.

الآن انظر هذا:

.الأساسية {
  شبكة المنطقة: المحتوى ؛
}
.تذييل {
  شبكة المنطقة: تذييل؛
}
. بجوار
  شبكة المنطقة: الشريط الجانبي.
}

ماذا يحدث هناك؟

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

في Javascript ، يمكننا أن نقول:

var gridArea = "محتوى"

ما تم القيام به أعلاه هو ، حفظ محتوى السلسلة في شبكة متغير

ما إعلان CSS أعلاه لا يشبه إلى حد كبير.

يمكن تعيين كل عنصر شبكة إلى منطقة داخل حاوية الشبكة. اقرأ ذلك مرة أخرى.

يمكن تعيين كل عنصر شبكة إلى منطقة داخل حاوية الشبكة

ومع ذلك ، قبل القيام بذلك ، لا بد من إرفاق عناصر الشبكة إلى اسم المنطقة. مثلك تعيين المتغيرات في جافا سكريبت - نوع من.

.الأساسية {
  شبكة المنطقة: المحتوى ؛
}
.تذييل {
  شبكة المنطقة: تذييل؛
}
. بجوار
  شبكة المنطقة: الشريط الجانبي.
}

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

الآن تم تعيين جميع عناصر الشبكة أسماء المناطق.

في البرمجة ، يتم تعيين المتغيرات لاستخدامها في مكان آخر. الآن ، دعونا نستفيد من أسماء مناطق الشبكة.

وضع منطقة الشبكة

شاب لديه كعكة مخبوزة جيدا. لديه 3 أطفال يطلبون إعطائهم بعض الأجزاء. من الناحية المثالية ، من يشارك الكعكة؟

الشاب!

الشاب يقطع المناطق ويعطيها لأطفاله.

لذيذ!

إليكم السبب في سرد ​​هذه القصة الجميلة.

مثل الكعكة ، وتعود ملكية الشبكة بالكامل من قبل من؟

حاوية الشبكة!

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

شيء اخر.

نظرًا لأن جميع الأطفال لديهم أسماء ، فقد يقول الشاب ، "يا برايان ، ها هو الجزء الخاص بك" ، أو "يا إيما ، لديك هذا"

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

جميع عناصر الشبكة لها أسماء! لقد فعلنا ذلك باستخدام خاصية شبكة المنطقة.

الآن ، دعونا نشارك الكعكة!

خاصية مناطق شبكة القوالب

يجب الآن مشاركة حاوية الشبكة في "الكعكة". تعيين ما أجزاء المنطقة يذهب إلى من.

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

كيف تعمل خاصية مناطق شبكة القوالب؟

ألقِ نظرة على الكود أدناه:

الجسم {
      مناطق قالب الشبكة: "محتوى الشريط الجانبي"
                           "تذييل الصفحة" ؛
  }

ما هيك هو ذلك؟

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

توفر خاصية مناطق قالب الشبكة (اسم خاصية طويل) بنية مرئية للغاية للشبكة.

ألقِ نظرة على الكود مرة أخرى:

الجسم {
      ...
      مناطق قالب الشبكة: "محتوى الشريط الجانبي"
                           "تذييل الصفحة" ؛
  }

لاحظ أن الإدخالات في قيمة الخاصية هي أسماء عناصر الشبكة!

يشير محتوى الشريط الجانبي وتذييله إلى أسماء عناصر الشبكة. لقد شارك الإعلان أعلاه بنجاح المنطقة فيما يتعلق بأسماء عناصر الشبكة - رائعة!

ستساعدك الصورة أعلاه على فهم كيفية تقسيم أجزاء المنطقة.

يأخذ تذييل الصفحة الجزء السفلي بأكمله. يأخذ الشريط الجانبي والمحتوى المساحات الأولى والثانية على التوالي.

رائع!

في هذه المرحلة ، إليك ما لدينا:

الجسم {
      عرض: الشبكة.
      شبكة أعمدة القوالب: 40px 1fr؛
      شبكة القوالب الصفوف: 1fr 90px؛
      مناطق قالب الشبكة: "محتوى الشريط الجانبي"
                           "تذييل الصفحة" ؛
  }

نتيجة ذلك هي:

الخطوة 1: https://codepen.io/ohansemmanuel/pen/bRWrPE

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

هيا بنا نتجاوب مع إعادة تعريف مناطق الشبكات باستخدام استعلامات الوسائط

وصور متحركة من محرم سنيل

لا يتم تعيين مساحات الشبكات التي تنشئها داخل حاوية الشبكة الأصل بالحجر. يمكن تغيير مناطق الشبكة بناءً على حجم شاشة جهاز المستخدم.

توضح الصورة أدناه ما نهدف إلى تحقيقه على شاشات المحمول.

Catty Music ، على الهاتف المحمول

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

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

يعدل الكود الحالي لديك الآن. لف الشبكة التي تحدد البت في استعلام الوسائط.

مثله:

Media فقط الشاشة و (العرض الأدنى: 600 بكسل) {
    الجسم {
        شبكة أعمدة القوالب: 120px 1fr؛
        مناطق قالب الشبكة: "محتوى الشريط الجانبي"
                             "تذييل الصفحة" ؛
         }
}

يجب عليك ترك الإعدادات الافتراضية مستبعدة من استعلام الوسائط

الجسم {
    عرض: الشبكة.
    شبكة القوالب الصفوف: 1fr 50px؛
}

لماذا لدي صفوف شبكة القوالب: 1fr 50px مستبعدة من استعلام الوسائط؟

وذلك لأن كل من شاشات المحمول وسطح المكتب سيكون لها نفس تعريف الصف. 2 صفوف.

ومع ذلك ، على أجهزة سطح المكتب ، هناك شريط جانبي. الشريط الجانبي حسابات 120px في تعريف أعمدة الشبكة الشبكة. ومع ذلك ، فإن الشريط الجانبي غير موجود على الأجهزة المحمولة.

وبالتالي ، سوف نقوم بإعادة تحديد إعلان عمود شبكة القوالب للجوال.

الآن بالنسبة للأجهزة المحمولة ، سنترك هذا التصميم الافتراضي. أنا لا ملفوفة في أي استفسار وسائط.

الجسم {
   مناطق قالب الشبكة: "محتوى"
                        "تذييل"

بسيط جدا؟

دعني أشرح.

التدفق الافتراضي (اتجاه) الشبكة

كتلة الرمز لشاشات المحمول سهلة.

الجسم {
   مناطق قالب الشبكة: "محتوى"
                        "تذييل"

ومع ذلك ، لاحظ أنه لم تكن هناك حاجة لتحديد أعمدة شبكة القوالب

بشكل افتراضي ، ستعمل الشبكة على محاذاة أطفالها مع الصفوف.

لذلك ، سيحاذي الإعلان أعلاه المحتوى على طول صف ، وتذييل الصفحة على طول آخر.

أدناه هي نتيجة ذلك - الشريط الجانبي مخفي على الهاتف المحمول.

الخطوة 2: https://codepen.io/ohansemmanuel/pen/qjVvjJ؟editors=1100

مع العقبة الأولى المتمثلة في فهم كيفية عمل الشبكات ، وإنشاء شبكة سريعة الاستجابة ، دعونا ننهي تصميم التطبيق!

وضع المحتوى داخل الشبكة.

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

هيا بنا نبدأ.

1. الشريط الجانبي

هذا يبدو وكأنه أسهل لتبدأ. هيا نذهب اليها.

يتكون الشريط الجانبي من 8 أيقونات موزعة رأسياً على طول الشريط الجانبي بأكمله.

أدخل الرموز ، مثل هذا:

                                                       

أدناه هو نتيجة ذلك:

https://codepen.io/ohansemmanuel/pen/BZmbza

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

.أنا جانبًا {
  عرض لا شيء؛
}
Media فقط الشاشة و (العرض الأدنى: 600 بكسل) {
  .أنا جانبًا {
    العرض محجوب؛
  }
}

يتم عرض الرموز ، ولكن محاذاة سيئة.

محاذاة الرموز

علامات i عبارة عن عناصر مضمّنة - وهذا ما يفسر سبب جلوس كل رمزين على سطر واحد.

دعنا نصلح الترتيب.

يمكن أن تكون عناصر الشبكة شبكات أنفسهم. لما لا

الخطوة 1: جعل الشريط الجانبي حاوية الشبكة

سيمكّن هذا الوصول إلى استخدام ميزات محاذاة الشبكة.

نظرًا لأن الشريط الجانبي لا يُرى إلا على الشاشات الأكبر حجمًا ، فلا تنس أن تلتف هذا في استعلام الوسائط.

Media فقط الشاشة و (العرض الأدنى: 600 بكسل) {

  . بجوار
     عرض: الشبكة.
  }
  
  .أنا جانبًا {
    الحدود: 1px الصلبة الأحمر.
  }
}

لقد تقدمت لإضافة حدود إلى كل رمز - بحيث يمكن تمييزها بصريًا.

ما يحدث هناك؟

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

يتعلق الأمر بالموضع الافتراضي للعناصر في الشبكة - على التوالي. أيضًا ، يتم ترتيب عناصر الشبكة لشغل مساحة حاوية الشبكة ، حسب الحاجة.

هنا تأتي الصلصة الحلوة.

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

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

محاذاة العناصر سوف محاذاة العناصر على طول محور العمود. في معظم الحالات ، العمود مرادف أيضًا للاتجاه الرأسي.

قم بتطبيق هذا على الشريط الجانبي ، وقد وضعنا الرموز تمامًا.

. بجوار
     ...
     تبرير العناصر: المركز ؛
     محاذاة البنود: مركز.
  }

لا يزال مربكًا ، شاهد التغييرات في عناصر الشريط الجانبي أثناء الكتابة.

الآن وضعنا الرموز في الشريط الجانبي تمامًا.

https://codepen.io/ohansemmanuel/pen/MorYJq؟editors=1100

تتضمن بعض القيم الأخرى التي تبررها العناصر والمحاذاة:

  • تمتد
  • بداية
  • النهاية
  • مركز

إذا كنت تعمل مع Flexbox ، فيجب أن تكون مألوفة.

سننتقل إلى وضع المزيد من المحتوى في التصميم الحالي.

استهدف القسم الرئيسي ، القسم الأزرق الداكن في الصورة أعلاه. ضع اثنين div داخل:

  
  

NB:

  1. main__header سوف يضم فن الموسيقى وعمليات التشغيل:
.main__header

2. main__body سوف يضم التفاصيل:

.الجسم الرئيسي

في هذا القسم سوف نركز على main__header

أولاً ، أضف html المطلوب

      
                        
          
              

CattyBoard أفضل 100 مخطط فردي (11.06.36)

              

فنان غير معروف               

2016. الرسوم البيانية . 100 أغنية

                     
                & nbsp؛ تشغيل الكل                 & nbsp؛ أضف إلى                 & nbsp؛ & nbsp؛ المزيد                  

لاحظ طريقة هيكلة المستند.

main__header لديه طفلان مباشران. div التي تحتوي على صورة وقسم يحتوي على تفاصيل الألبوم وتفاصيل

نتيجة الإضافة أعلاه هي هذه الصورة القبيحة:

رأس غير مكتمل

دعونا نجعل هذا جميل.

ما نحتاج إليه هو شبكة تحاذي أطفالها بشكل مناسب.

دعنا نستفيد من معرفتك الجديدة بمناطق الشبكة.

الخطوة الأولى ، حدد مناطق الشبكة:

.main__header> .img {
  شبكة المنطقة: img ؛
}
.main__header> .details {
  شبكة المنطقة: dtls.
}

تم تسمية div الذي يحتوي على الصورة img تم تسمية القسم الذي يحتوي على تفاصيل الألبوم dtls

الآن ، حدد الشبكة نفسها:

.main__header {
  عرض: الشبكة.
  مناطق قالب الشبكة: "img"
                       "DTLS".
}

.main__header يعين سياق تنسيق الشبكة. كما تم محاذاة المناطق لتكدس عموديا على آخر. imgfirst ، ثم dtls

هذا لأننا نعمل مع النهج الأول للهاتف المحمول. حسن.

في هذه المرحلة ، لم يتغير شيء كثير.

لقد شملت الحدود وجعلت النص أبيض للمساعدة البصرية.

ليس هذا هو الرأي الذي نريده على الهاتف المحمول.

بالنسبة لشاشات المحمول ، يجب محاذاة العناصر إلى المركز. أصلح هذا.

@ شاشة الوسائط و (الحد الأقصى للعرض: 600 بكسل)
  .main__header {
    تبرير العناصر: المركز ؛
  }
}

الآن سيتم وضع عناصر الشبكة في وسط الشبكة (على طول الصف)

جعل النصوص في .التعيين المحاذي للمركز:

@ شاشة الوسائط و (الحد الأقصى للعرض: 600 بكسل)
  .main__header> .details {
    محاذاة النص: المركز ؛
  }
}

قريبة جدا من الهدف النهائي. فقط عدد قليل من القرص.

الفقرات مع النصوص ، فنان غير معروف ، و 2016. الرسوم البيانية. 100 أغنية. يجب أن تكون مخفية على الهاتف المحمول. يجب أن تكون الصورة أصغر أيضًا

@ شاشة الوسائط و (الحد الأقصى للعرض: 600 بكسل)
  .sm - إخفاء {
    عرض لا شيء؛
  }
  .img> img {
    العرض: 150px
  }
}

سيتم إخفاء كل فئة .sm - إخفاء على الهاتف المحمول. فقط أضف هذه الفئة إلى العنصر المطلوب.

إليك الطريقة:

فنان غير معروف

2016. الرسوم البيانية . 100 أغنية

ولدينا هذا:

بعد فرز العرض على الهاتف المحمول ، فلنصلح ذلك للشاشات الأكبر حجمًا.

العودة إلى الشبكة الأم.

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

Media فقط الشاشة و (العرض الأدنى: 600 بكسل) {
   .main__header {
    شبكة أعمدة القوالب: 250px 1fr ؛
    مناطق قالب الشبكة: "img dtls"
  }
}

أنا متأكد من أنك تفهم ما يحدث هناك.

تم إعادة تعريف الشبكة ليكون لها عمودين. واحد ثابت في 250px والآخر لملء المساحة المتبقية.

https://codepen.io/ohansemmanuel/pen/gReOQJ؟editors=1100

تقدمنا ​​الحالي يعيش هنا.

الجزء 4: جعل شبكة CSS تعمل مع Flexbox

في هذا الجزء ، ستتعلم أن تعمل Flexbox و Grid معًا - بسلام.

لقد غيرت هاتان التقنيتان كيفية التعامل مع المخططات في CSS. إنه فعال بعد التمكن من استخدام كلا التقنيتين حيثما أمكن ذلك

دعنا نتعمق

بالنسبة للقسم الذي يحتوي على تفاصيل الموسيقى ، سنستخدم flexbox.

كيف تعرف مكان استخدام Flexbox؟

كقاعدة عامة للإبهام ، من المناسب استخدام الشبكة لتخطيط التصميم العام للصفحة و Flexbox لمكونات واجهة المستخدم الداخلية.

يمكن أن يكون عنصر الشبكة حاوية مرنة. يمكن أن يكون عنصر المرن أيضًا حاوية شبكة. وكثيرا ما يستخدم هذا الأخير على الرغم من.

أفترض أن لديك فهم جيد لـ flexbox.

كما هو الحال دائمًا ، ابدأ بـ html

يوجد أدناه div ، مع قائمة الأغاني. تحتوي قائمة الأغاني على فقرات تحتوي على اسم الأغنية وفنان ومدة الأغنية و "مزامنة سحابة حقلي".

        
              

1. رقصة واحدة

              

Crake feat CatKid & amp؛ Cyla               

و02:54               

CATTY CLOUD SYNC

                 
              

2. الباندا               

وCattee               

و04:06               

CATTY CLOUD SYNC

                 
              

3. لا يمكن أن تتوقف عن الشعور!

              

Catin Cimberlake

              

و03:56               

CATTY CLOUD SYNC

                   
              

4. العمل من المنزل

              

Cat Harmony feat Colla

              

و03:34               

CATTY CLOUD SYNC

              

إليك ما لدينا:

main__body هو عنصر الشبكة. يمكننا أن نجعلها حاوية مرنة إذا كان ذلك مفيدًا.

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

.main__body> div {
  عرض: ثني.
}

الآن تقسيم العرض بين العناصر التابعة:

.main__body> div p {
  المرن: 0 0 25٪ ؛
}
https://codepen.io/ohansemmanuel/full/pwLEBL/

ستوافق معي على أنه في هذه المرحلة ، تتم أساسيات التصميم. نعم ،

ومع ذلك ، فقد تقدمت لإجراء بعض التغييرات التجميلية.

يمكنك عرض نتيجة ذلك هنا

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

إذا كنت بحاجة إلى بعض الإشارات ، تحقق من الموسيقى اللينة المصممة بالكامل مع flexbox

مع عدد قليل من خصائص الشبكة ، قمت بتصميم تخطيط حقيقي للعالم. هذا مثير للإعجاب. لقد تعلمت أيضًا مهارة لا تقدر بثمن وهي جعل تخطيط CSS Grid يعمل مع Flexbox أيضًا.

تريد أن تصبح برو؟

قم بتنزيل ورقة الغش المجانية لشبكة CSS ، واحصل أيضًا على دورتي Flexbox تفاعليتين عالي الجودة مجانًا!

احصل على ورقة CSS المجانية لشبكة الغش + دورتان فليكس بوكس ​​عالي الجودة مجانًا!

أحصل عليها الآن