دليل لشبكة CSS: إتقان التخطيطات باستخدام خصائص الشبكة

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

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

حاويات الشبكة والعناصر

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

إليك كيفية تمثيلها:

يمكن أن يصبح عنصر الشبكة أيضًا حاوية شبكية. يمكنك الآن الإشارة إلى التخطيط كشبكة متداخلة — شبكة داخل شبكة. يُشار الآن إلى حاوية الشبكة الرئيسية باسم الشبكة الخارجية، بينما تصبح حاوية العنصر التي تحولت إلى شبكة شبكة داخلية.

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

وهنا ما يبدو:

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

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

خطوط الشبكة والمسارات

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

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

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

خصائص حاوية شبكة CSS

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

قالب الشبكة

تحدد هذه الخاصية حجم الصفوف والأعمدة. يمكنك تغيير حجم هذه الخصائص باستخدام وحدات البكسل أو النسب المئوية أو الوحدة الكسرية (fr). يمكنك أيضًا استخدام كلمات رئيسية مثل آلي, الحد الأدنى - الحد الأقصى()، و يكرر() لتعزيز المرونة.

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

وهنا بعض الأمثلة:

باستخدام بكسل:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

استخدام النسب المئوية:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

باستخدام الاب:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

استخدام الكلمات الرئيسية التلقائية وminmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

استخدام التكرار () للتحجيم المتسق:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

مناطق المواضع التلقائية ونماذج الشبكة

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

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

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

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

المحاذاة في شبكة CSS

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

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

هنا مثال:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

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

فجوة الشبكة

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

ال فجوة الشبكة تتيح لك الخاصية ضبط الفجوة بين الصفوف والأعمدة. يمكنك استخدام وحدات مختلفة لتعريفها، مثل البكسل (px)، والنسب المئوية (%)، ووحدات em (em)، والمزيد.

.grid-container {
grid-gap: 20px;
}

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

خصائص عنصر شبكة CSS

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

بداية صف الشبكة ونهاية صف الشبكة:

• يحدد خطوط صف البداية والنهاية للعنصر.
• يمكن أن تكون القيم عبارة عن أرقام أسطر أو "span n" أو "تلقائي".

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

هذا الكود يضع عنصر الشبكة 1 من سطر الصف الثاني إلى سطر الصف الرابع.

بداية عمود الشبكة ونهاية عمود الشبكة:

• يحدد خطوط عمود البداية والنهاية للعنصر.
• يمكن أن تكون القيم عبارة عن أرقام أسطر أو "span n" أو "auto".

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

هذا الكود يضع عنصر الشبكة 2 من سطر العمود الأول إلى سطر العمود الثالث.

منطقة الشبكة:

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

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

وهذه هي النتيجة:

تبرير الذات:

• محاذاة العناصر الفردية أفقيًا داخل خليتها.
• يمكن أن تكون القيم البداية والنهاية والمركز والامتداد.

.grid-item-5 {
justify-self: center;
}

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

محاذاة الذات:

• محاذاة العناصر الفردية عموديًا داخل خليتها.
• يمكن أن تكون القيم البداية والنهاية والمركز والامتداد.

.grid-item-1 {
align-self: end;
}

هذا الرمز محاذاة عنصر الشبكة 1 إلى أسفل خليته.

لا تتردد في دمج هذه الخصائص وتخصيصها لإنشاء التخطيط والمظهر الذي تريده لكل عنصر شبكة في شبكة CSS الخاصة بك.

إنشاء تخطيطات سريعة الاستجابة باستخدام شبكات CSS

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

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

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

اكتشف إمكانيات تخطيط شبكة CSS

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

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