كيفية إنشاء تخطيط بسيط باستخدام CSS Grid Layouts

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

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

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

حان الوقت أخيرًا لاقتحام الشبكة واستكشاف إمكانيات التصميم الجديدة!

دعم شبكة CSS

كل هذا يتوقف على المتصفحات التي تحتاج إلى دعمها ، ولكن هناك فرصة جيدة جدًا ألا تقلق بشأن "وضع العلم" عند استخدام شبكات CSS. يمكنك دائمًا زيارة وثائق Can I Use للتحقق مرة أخرى ، لكن دعم CSS Grids قد زاد بشكل كبير وأصبح العديد من المصممين قادرين على استخدامه في الإنتاج ، وهذا سبب للاحتفال!

أساسيات تخطيط شبكة CSS

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

أجزاء من الشبكة

خطوط

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

المسارات

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

الخلايا

تم العثور على الخلايا حيث يلتقي المسار الأفقي والرأسي. هناك ثماني خلايا في الرسم التخطيطي.

المناطق

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

إنشاء تخطيط الشبكة

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

HTML للشبكة

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

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

أنماط CSS

بعد الانتهاء من ترميز HTML ، يتم الإعلان الأكثر أهمية في CSS. داخل الحاوية ، تحتاج إلى تطبيق display:grid or display:inline-grid . استخدم display:grid إذا كنت ترغب في شبكة على مستوى الكتلة. استخدام display:inline-grid للشبكات على مستوى الخط.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

يتم استخدام خصائص grid-template-columns grid-template-rows لتحديد عرض الصفوف والأعمدة. تم تعيين grid-template-columns كـ 1fr و 3fr. هذا هو المكان الذي تتشكل فيه الشبكة مع الوحدات الكسرية. بهذه القيم ، من الواضح أن هناك عمودين غير متساويين في العرض. العمود الذي تم ضبطه على 3fr أكبر بثلاث مرات من العمود الآخر. يوضح هذا كيف يبدو الشريط الجانبي أضيق من منطقة المحتوى.

هناك تخصيصات سريعة الاستجابة يمكن إجراؤها ، لكن استخدام الوحدات الكسرية يعد خطوة أولى رائعة. يمكن التحكم في التباعد بين المناطق باستخدام grid-column-gamp grid-row-gap .

تبدو الأشياء ضيقة جدًا ، ولكن مع وجود بعض المواصفات الإضافية ، ستتشكل الأشياء.

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

لنبدأ بالرأس ، الذي ينتقل من سطر العمود 1 إلى سطر العمود 4 وسطر الصف 1 إلى سطر الصف 2. سيبدو CSS كما يلي:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

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

نستخدم grid-column-start لتحديد خط البداية الرأسي لعنصر. في هذه الحالة ، سيتم تعيينه على ثلاثة. تشير grid-column-end إلى خط النهاية الرأسي للعنصر. في هذه الحالة ، هذه الخاصية ستساوي أربعة. سيتم أيضًا تعيين قيم الصف الأخرى بنفس الطريقة. يوجد موضع الشريط الجانبي ، يتم تغطيته فقط من خلال منطقة المحتوى.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

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

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

آخر منطقتين للمحتوى هما منطقة المحتوى الإضافية والتذييل.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

يمكن كتابة إقرارات النهاية والبدء بشكل أكثر كفاءة. قد ترى grid-column-start: 1; grid-column-end: 3; مكتوب باختصار. سيبدو هذا مثل grid-column: 1 / 3; . يمكن استخدام هذه الفكرة نفسها للإعلان عن معلومات صف العمود.

مزايا استجابة

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

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

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

أداة المستعرض لـ CSS Grid Layout

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

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