مرحبًا بك مرة أخرى في مغامرة CSS الخاصة بك! اليوم، سنتعمق في واحدة من أقوى الأدوات في ترسانة تصميم الويب الخاصة بك: CSS Grid Layout. فكر في الأمر باعتباره سكين الجيش السويسري لتقنيات التخطيط - متعدد الاستخدامات، ودقيق، وقادر على تحويل صفحات الويب الخاصة بك إلى روائع منظمة بشكل جميل. على استعداد للشبكة وتحمله؟ دعنا نذهب!

ما هو تخطيط شبكة CSS؟

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

لماذا نستخدم شبكة CSS؟

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

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

إعداد شبكتك: الأساسيات

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

    
1
    
2
    
3
    
4

الآن، دعنا نحول تلك الحاوية إلى شبكة في CSS الخاص بك:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.grid-item {
    background-color: #007BFF;
    color: white;
    padding: 20px;
    text-align: center;
}

فهم خصائص الشبكة

دعونا نقسمها:

• العرض: الشبكة: يؤدي هذا إلى تحويل الحاوية الخاصة بك إلى شبكة.
• أعمدة قالب الشبكة: تكرار (2، 1fr): يؤدي هذا إلى إنشاء عمودين متساويين في العرض. 1fr هي وحدة مرنة تشغل جزءًا واحدًا من المساحة المتوفرة.
• الفجوة: 10 بكسل: يؤدي هذا إلى إضافة فجوة بمقدار 10 بكسل بين عناصر الشبكة .

وضع العناصر على الشبكة: أنت الرئيس

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

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    gap: 10px;
}

.grid-item:first-child {
    grid-column: 1 / 3;
}

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

تقنيات الشبكة المتقدمة: أطلق العنان للمهندس المعماري الداخلي الخاص بك

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

1. الشبكات المتداخلة

فكر في الأمر كشبكات داخل شبكات - بداية لإمكانيات التخطيط.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

.nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

هنا، .nested-grid هو عنصر شبكة داخل الشبكة الرئيسية ولكنه أيضًا حاوية شبكة نفسها، مما يسمح لك بإنشاء تخطيطات أكثر تعقيدًا.

2. الملء التلقائي والاحتواء التلقائي

هل تريد أن تتكيف شبكتك بناءً على المساحة المتاحة؟ تعرف على الملء التلقائي والاحتواء التلقائي.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

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

التفاف

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

تعليمات سعيدة!