تعلم CSS Grid في 5 دقائق - برنامج تعليمي للمبتدئين

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

حصلت الوحدة أيضًا على دعم أصلي من المتصفحات الرئيسية (Safari و Chrome و Firefox و Edge) ، لذلك أعتقد أن جميع مطوري الواجهة الأمامية سيتعين عليهم تعلم هذه التقنية في المستقبل غير البعيد .

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

لقد قمت أيضًا بإنشاء دورة مجانية لشبكة CSS. انقر هنا للوصول الكامل إلى

عليه.

بدلاً من ذلك ، راجع هذه المقالة ، التي تشرح ما ستتعلمه خلال الدورة التدريبية:

الآن دعنا نقفز إليه!

أول تخطيط شبكي لك

المكونان الأساسيان لشبكة CSS هما الغلاف (الأصل) و

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

إليك الترميز للغلاف الذي يحتوي على ستة عناصر:

 1 2 3 4 5 6 

لتحويل غلافنا divإلى شبكة ، فإننا ببساطة نعرضه

grid:

لكن هذا لا يفعل أي شيء حتى الآن ، لأننا لم نحدد كيف نريد أن تبدو شبكتنا. سوف تكدس ببساطة 6 div'sفوق بعضها البعض.

لقد أضفت القليل من التصميم ، لكن هذا لا علاقة له بشبكة CSS.

الأعمدة والصفوف

لجعلها ثنائية الأبعاد ، سنحتاج إلى تحديد الأعمدة والصفوف ، لننشئ ثلاثة أعمدة وصفين. سنستخدم خصائص grid-template-rowو grid-template-column.

نظرًا لأننا كتبنا ثلاث قيم grid-template-columns، فسنحصل على ثلاثة أعمدة. سنحصل على صفين ، حيث حددنا قيمتين لـ grid-template-rows.

تحدد القيم مدى العرض الذي نريد أن تكون أعمدةنا فيه (100 بكسل) وكم نريد أن تكون صفوفنا (50 بكسل). ها هي النتيجة:

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

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

حاول فهم العلاقة بين الكود والتخطيط.

إليك كيف يتم ذلك:

وضع العناصر

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

لنقم بإنشاء شبكة 3x3 ، باستخدام نفس الترميز السابق.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

سينتج عن هذا التخطيط التالي:

لاحظ ، أننا نرى فقط شبكة 3x2 على الصفحة ، بينما قمنا بتعريفها على أنها شبكة 3x3. هذا لأن لدينا ستة عناصر فقط لملء الشبكة بها. إذا كان لدينا ثلاثة أكثر ، فسيتم ملء الصف السفلي أيضًا.

إلى موقف وتغيير حجم البنود ونحن سوف استهدافهم واستخدام grid-columnو grid-rowالخصائص:

.item1 { grid-column-start: 1; grid-column-end: 4; } 

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

إليك كيفية عرض ذلك على الشاشة:

هل أنت محتار لماذا لدينا 4 أسطر أعمدة عندما يكون لدينا 3 أعمدة فقط؟ ألق نظرة على هذه الصورة ، حيث رسمت خطوط العمود باللون الأسود:

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

أخيرًا ، أود أن أوضح طريقة أبسط لكتابة الصيغة أعلاه:

للتأكد من فهمك لهذا المفهوم بشكل صحيح ، دعنا نعيد ترتيب العناصر قليلاً.

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

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

وأنه كان عليه!

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