CSS Grid layout: اضرب وقهر - أو كيف تصمم في الواقع باستخدام The Grid.

يمكنك متابعي على Twitter للحصول على دروس تعليمية ونصائح JavaScript وما إلى ذلك.

سنقوم بتصميم تصميم سريع الاستجابة باستخدام CSS Grid في هذا البرنامج التعليمي. وإليك نظرة طاغية لما يمكن توقعه من العملية:

للحصول على فكرة جيدة عن كيفية عمل المرن ، جرّب محرر المخططات المرنة في هذه الصفحة.

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

مع الأجهزة المحمولة المستقلّة للقرار ، أصبحت الأمور معقدة. إنهم يتسببون في تغيير قواعد التصميم المستجيبة الكلاسيكية ، IM.

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

ما اكتشفته يتبع.

الأفكار الأساسية وراء تقسيم العمود

لقد حاولت معرفة ما نكسبه بالفعل من كل قسم عمود.

تساعدنا التصميمات ذات العمود الواحد على وضع جميع محتوياتنا في قائمة عمودية طويلة.

التصميمات ذات العمودين مقبولة بالنسبة لمعارض / حافظات الصور المصغرة (اللوحية)؟

تصميمات عمود الشجرة هي الأولى من نوعها التي تقدم الحدود (الهوامش).

تعمل التصميمات الأربعة أعمدة بشكل جيد مع معارض الصور بملء الشاشة.

لقد لاحظت أن تخطيطات الأعمدة ذات الأرقام الفردية (≥ 1) تعمل للتخطيطات القائمة على الحدود.

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

يمكن أن تصمم تصميمات خمسة أعمدة تنسيق مقال لائق @ متوسط.

وخلال بقية هذا البرنامج التعليمي سنستكشف صنع واحدة!

استخدم وحدات fr لتجعلها تتوسع كما تريد: الهامش التلقائي للعناصر العادية. لا يهم إذا كان 1fr أو 2fr أو n-fr للحدود ، طالما تم تحديد المحتوى الأساسي باستخدام بكسل أو قيمة كبيرة (r) fr (10fr ، 20fr ، إلخ):

الفرق الوحيد هنا هو أن متوسط ​​يستخدم 1000 بكسل للمحتوى الواسع و 700 بكسل لعمود المقالة الرئيسي. ولكن الفكرة هي نفسها.

استجابة الشبكة + الذهاب موبايل

حتى الآن أنشأنا سقالة الأولية. ولكن ماذا عن التصميم المتجاوب؟

شبكة CSS تجعل الأمور أسهل مما تعتقد!

تذكر:

محتوى استجابة! = حدود استجابة.

يجب التعامل مع التقنيتين بشكل منفصل. لكن…

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

إذا كان بإمكانك استخدام إبداعك في حل العديد من المشكلات باستخدام تقنية واحدة ... كل ذلك أفضل.

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

يمكنك القيام بذلك عبر استعلامات الوسائط أو JavaScript.

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

إذا كنت بحاجة إلى إزالة حدود 0.5fr تمامًا ، فيمكنك تعيينها على 0fr. لكني شخصياً أحب أن يكون لديّ حدود صغيرة على مشاهدات الجوال. إنه يجعل حارة المحتوى تبدو أفضل في رأيي.

الذهاب المحمول

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

الدرس المستفاد هنا؟

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

  • هل هذا هو الحل الوحيد؟ لا.
  • هل هذا حل مثالي؟ لا.
  • لكنه يحل المشكلة ، ويعمل - بما فيه الكفاية بما فيه الكفاية.

وهذا شيء جيد نستهدفه. النهج الموضح في هذا البرنامج التعليمي هو:

1. أكثر مجزية ومتعة
 2. إنه محترم.
 3. يدعوك لفهم حقيقة كيف ولماذا يعمل شيء ما.
 4. الأمر بسيط. وبالتالي ، يخلق رمز سهلة الصيانة.
 5. وتنتج رمز نظيفة.
 6. تبقي ضميرك نظيفة.

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

محرر المادة الديناميكية مثل المتوسطة؟

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

يمكن ترتيبها بأي شكل من الأشكال. لكنني أعتقد أنه باستخدام JavaScript وساعات قليلة من وقتك ، من الممكن إنشاء محرر مقال ديناميكي (تمامًا مثل Medium) من خلال تبديل مناطق قوالب الشبكة كما هو موضح أعلاه.

لا يزال بإمكانك استخدام هذا التنسيق (بالطبع) للمقالات الثابتة البسيطة إذا كنت تقوم بتصميمها بنفسك يدويًا ومعرفة نوع المحتوى الذي يتبعه.

غير شبكة المغلق بديلة لتصميم المواد المتوسطة مثل؟

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

حظا سعيدا في ذلك .

أعتقد أن شبكة CSS تبسط العملية دون التضحية بالكود النظيف.

لقد نظرت إلى <شفرة المصدر> لصفحتك التعليمية المتوسطة. هذه فوضى.

الكلمات الأخيرة

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

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

لكن ... لم أتمكن من العثور على برنامج تعليمي واحد عبر الإنترنت أظهر ذلك. لذلك قررت أن أكتب بنفسي وشاركه معك!

الأمر كله يتعلق بمحاولة فهم الأشياء بناءً على الغرض المقصود منها.

إذا كنت تقضي وقتًا في التعرف على شبكة CSS جيدًا ، فهذا مثل الغش.

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

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

آمل أن تكون هذه الأفكار البسيطة قد ساعدتك في أن تصبح أكثر دراية بشبكة CSS.

لمزيد من الأسبوعية Freemium ...

يمكنك متابعتي على Twitter لقضاء عطلة نهاية الأسبوع في ملفات PDF.

اتبعني على Instagram للحصول على ضربة سريعة لجافا سكريبت.

يمكنك متابعتي على Facebook لأشياء الترميز المجانية.

عرض لوقت محدود

تأثرت المخططات في هذا البرنامج التعليمي مباشرة بالمخطوطة!

CSS Visual Dictionary 28٪ OFF للقراء المتوسطين.

خصم 28 ٪

القراء المتوسطون فقط:

CSS قاموس مرئي

== الاستيلاء على نسخة ==

يحتوي على جميع خصائص CSS.