عناصر Grid
عناصر Grid (Grid Items) هي لبنة البناء الأساسية في CSS Grid، حيث تمثل كل عنصر داخل شبكة Grid مستقلة يمكن التحكم بموقعها، حجمها، ومحاذاتها. استخدام عناصر Grid يسمح للمصممين والمطورين بإنشاء تخطيطات معقدة ومرنة بسهولة، تمامًا مثل بناء منزل حيث كل غرفة (عنصر) لها مكان محدد داخل الهيكل العام. في مواقع الأخبار، يمكن استخدام عناصر Grid لترتيب المقالات والصور بشكل ديناميكي، بينما في مواقع التجارة الإلكترونية تساعد في عرض المنتجات بطريقة منظمة وجذابة. على الصفحات الشخصية والحكومية، تتيح عناصر Grid توزيع المحتوى بشكل متناسق ومرن يناسب جميع الأجهزة.
في هذا الدرس، ستتعلم كيفية التحكم في كل عنصر من عناصر Grid باستخدام خصائص مثل grid-column وgrid-row، بالإضافة إلى كيفية تعديل المحاذاة، وتحديد المساحات التي يشغلها كل عنصر داخل الشبكة. سنتناول أمثلة عملية يمكن تطبيقها مباشرة على مواقع حقيقية، مع التركيز على كيفية تحسين تجربة المستخدم والحفاظ على تصميم مستجيب وسلس. تمامًا مثل ترتيب الكتب في مكتبة بطريقة تجعل العثور على أي كتاب سهلاً، ستتمكن من ترتيب عناصر موقعك بدقة وسهولة. ستكتسب مهارات تمكنك من بناء تخطيطات معقدة وعملية مع الحفاظ على الكود نظيف وسهل الصيانة.
مثال أساسي
css.container {
display: grid; /* تعريف الحاوية كشبكة Grid */
grid-template-columns: repeat(3, 1fr); /* تقسيم الشبكة إلى 3 أعمدة متساوية */
grid-template-rows: 100px 200px; /* صفان بأحجام مختلفة */
gap: 10px; /* مسافة بين العناصر */
}
.item1 { grid-column: 1 / 3; /* يشغل العمود الأول والثاني */ }
.item2 { grid-row: 2 / 3; /* يشغل الصف الثاني */ }في المثال أعلاه، بدأنا بتعريف حاوية Grid باستخدام display: grid، وهو الأساس لتحويل أي عنصر HTML إلى شبكة يمكن التحكم في عناصرها. ثم استخدمنا grid-template-columns لتقسيم الشبكة إلى ثلاثة أعمدة متساوية العرض باستخدام repeat(3, 1fr)، حيث fr تعني "fraction" أي نسبة من المساحة المتاحة. بعد ذلك، حددنا الصفوف باستخدام grid-template-rows، مخصصين صفًا بارتفاع 100px وآخر بارتفاع 200px.
خاصية gap تحدد المسافة بين عناصر الشبكة، مما يسهل تنظيم التخطيط كما لو كنا نترك فراغات مناسبة بين الأثاث عند ترتيب الغرف. بعد ذلك، حددنا موقع العناصر الفردية: .item1 يشغل العمود الأول والثاني باستخدام grid-column: 1 / 3، و.item2 يشغل الصف الثاني فقط باستخدام grid-row: 2 / 3. هذه الطريقة تمنحك حرية كبيرة في التحكم بمكان كل عنصر وتساعد على تصميم تخطيطات ديناميكية ومتجاوبة، مناسبة لمواقع الأخبار التي تحتوي على مقالات وصور متعددة أو مواقع التجارة الإلكترونية التي تحتاج إلى ترتيب المنتجات بدقة.
مثال عملي
css.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* أعمدة مرنة تتكيف مع حجم الشاشة */
grid-auto-rows: 150px; /* ارتفاع افتراضي للصفوف */
gap: 15px;
}
.article { background-color: #f0f0f0; padding: 10px; } /* تصميم بصري للعناصر */
.article.featured { grid-column: span 2; grid-row: span 2; } /* مقالات مميزة أكبر حجمًا */في المثال العملي، استخدمنا grid-template-columns مع auto-fit وminmax لإنشاء أعمدة مرنة تتكيف تلقائيًا مع حجم الشاشة، وهو أمر أساسي في تصميمات الجوال أولاً (mobile-first). grid-auto-rows يحدد ارتفاع الصفوف الافتراضي، بينما gap يترك مسافات بين العناصر للحفاظ على قراءة سهلة وتجربة مستخدم مرتبة.
العناصر .article تم تلوينها وتزويدها بحشوة padding لتحسين الشكل، بينما المقالات المميزة featured تمتد على صفين وعمودين باستخدام grid-column: span 2 وgrid-row: span 2، مما يسمح بتسليط الضوء على محتوى مهم، مثل الخبر الرئيسي أو المنتج الأكثر مبيعًا في متجر إلكتروني. هذا المثال يعكس الاستخدام العملي لعناصر Grid في مواقع حقيقية، ويظهر كيفية مزج البساطة مع التحكم الدقيق في التخطيط.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| grid-column | تحديد موقع العنصر بين الأعمدة | grid-column: 1 / 3; |
| grid-row | تحديد موقع العنصر بين الصفوف | grid-row: 2 / 4; |
| justify-self | محاذاة العنصر أفقيًا داخل الخلية | justify-self: center; |
| align-self | محاذاة العنصر عموديًا داخل الخلية | align-self: end; |
| grid-area | تحديد مساحة العنصر بالصفوف والأعمدة | grid-area: 1 / 1 / 3 / 3; |
| gap | المسافة بين العناصر داخل الشبكة | gap: 10px; |
أفضل الممارسات تشمل التصميم أولًا للجوال (mobile-first)، تحسين الأداء بتقليل استخدام الخصائص الثقيلة، والحفاظ على كود Grid قابل للصيانة مع أسماء واضحة للعناصر. تجنب الأخطاء الشائعة مثل تضارب الخصوصية specificity conflicts بين عناصر Grid، سوء التصميم المتجاوب، وتجاوزات مفرطة للخصائص التي تؤدي إلى كود صعب الفهم. عند تصحيح الأخطاء، يمكن استخدام أدوات المتصفح لتحديد مواضع العناصر، والتحقق من قياسات الأعمدة والصفوف، ومراقبة التكيف على مختلف الأجهزة. من المهم أيضًا ترتيب العناصر بشكل منطقي وواضح، كما نفعل عند تنظيم مكتبة، مما يسهل التوسع المستقبلي دون إعادة تصميم كامل.
في الختام، عناصر Grid تمثل الأساس لبناء أي شبكة معقدة في CSS. من خلال تعلم التحكم في grid-column، grid-row، والخصائص المتعلقة بالمحاذاة، يمكنك إنشاء تخطيطات متجاوبة ومرنة لمواقع الأخبار، التجارة الإلكترونية، الصفحات الشخصية، والمواقع الحكومية. هذه المعرفة ترتبط ارتباطًا وثيقًا ببنية HTML، حيث يحتاج كل عنصر إلى مكان محدد داخل الشبكة، وتفتح الباب للتفاعل مع JavaScript لتوليد محتوى ديناميكي. للخطوة التالية، يُنصح بدراسة تقنيات Grid المتقدمة مثل grid-template-areas وauto-fill وminmax، بالإضافة إلى دمج Flexbox داخل Grid لتحقيق تخطيطات هجين متقدمة. الاستمرار في التجربة العملية على مواقع حقيقية سيجعل فهمك أعمق ويعزز مهاراتك في تصميم واجهات مرنة ومحترفة.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى