تخطيط شبكة CSS

📅 آخر تحديث: ١٧ يوليو ٢٠٢٦
✍️ نُشر في: ١٧ يوليو ٢٠٢٦
📷 يحتوي على 2 صور
الموسوعة الحرة

في لغة CSS ، يُسهّل تخطيط الشبكة (CSS grid layout ) إنشاء تصميمات شبكية معقدة ومتجاوبة للمواقع الإلكترونية، ويجعلها أكثر اتساقًا عبر مختلف المتصفحات. [ 6 ] تاريخيًا، كانت هناك طرق أخرى للتحكم في تخطيط صفحات الويب، مثل الجداول ، والعناصر العائمة ، ومؤخرًا، تخطيط الصندوق المرن (Flexbox). لا يُعدّ تخطيط الشبكة معيارًا رسميًا حاليًا (بل هو توصية مرشحة من اتحاد شبكة الويب العالمية W3C )، على الرغم من اعتماده في الإصدارات الحديثة من جميع المتصفحات الرئيسية الحالية. [ 7 ]

تحفيز

تتيح شبكة CSS إنشاء تصميمات أكثر قوة ومرونة من الخيارات السابقة مثل خاصية CSS float . كما أنها تسمح باستخدام كود أكثر توحيدًا يعمل عبر مختلف المتصفحات، على عكس الاعتماد على حلول بديلة خاصة بمتصفحات معينة أو حلول معقدة. [ 2 ]

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

تاريخ

أُنشئت المسودة الشاملة الأولى لتصميم الشبكة في لغة CSS بواسطة فيل كوب ، وماركوس ميلكي ، وأليكس موغيليفسكي في مايكروسوفت عام 2011، وطُبقت في متصفح إنترنت إكسبلورر 10 باستخدام -ms-بادئة خاصة بالمورد . أُعيد هيكلة الصيغة وتحسينها عبر عدة جولات في مجموعة عمل CSS ، بقيادة إليكا إيتيماد وتاب أتكينز جونيور. لاقت هذه الميزة رواجًا واسعًا بين مطوري الويب بعد حملة ترويجية قادتها راشيل أندرو وجين سيمونز . [ 8 ]

دعم المتصفح

اعتبارًا من أكتوبر 2017، تدعم متصفحات Chrome وFirefox وSafari وEdge جميعها تقنية CSS Grid بدون بادئات خاصة بالبائعين. [ 9 ] [ 10 ] [ 11 ] يدعم متصفحا IE 10 و11 تقنية CSS Grid، ولكن بمواصفات قديمة. على الأجهزة المحمولة، تدعم جميع المتصفحات الحديثة تقنية CSS Grid باستثناء Opera Mini . [ 12 ] يمكن لمطوري الويب الذين يستهدفون المتصفحات القديمة استخدام Modernizr 3.5.0 لاكتشاف هذه التقنية وتعديل صفحات الويب بشكل مناسب حسب الحاجة. [ 13 ]

الاستخدام في الأطر

يُدمج Tailwind CSS نظام CSS grid ضمن أدواته للتحكم في حجم العناصر وموضعها. [ 14 ] مع ذلك، لا تُدمج العديد من أُطر عمل الويب الحالية الأخرى نظام CSS grid، مثل Bootstrap 4 و Foundation 6. [ 15 ]

وحدة fr

تُستخدم وحدة "fr" غالبًا مع تخطيط شبكة CSS. [ 16 ] [ 17 ] [ 18 ] تمثل وحدة "fr"، وهي جزء من مواصفات تخطيط شبكة CSS، جزءًا من المساحة المتبقية في حاوية الشبكة. [ 2 ]

أمثلة

تصميم "الكأس المقدسة"

فيما يلي مثال على تصميم "الكأس المقدسة" :

HTML
<html> <style> div { border : 1px solid ; } body { display : grid ; grid-template-columns : 10em auto 10em ; grid - template -areas : " header header header" "left middle right" " footer footer footer" ; } </style> <body> < div style = "grid-area: header" > الرأس < / div > < div style = "grid-area: footer" > التذييل </ div > < div style = "grid - area : left" > اللوحة اليسرى </ div > < div style = "grid - area: middle; height: 200px" > منطقة المحتوى الرئيسية </ div > < div style = " grid - area : right" > اللوحة اليمنى < / div > </body> </html>
الناتجتخطيط CSS Grid Holy Grail

جدول القيم

فيما يلي مثال على جدول القيم:

HTML
<html> <style> .wrapper { display : grid ; grid - template - columns : 1fr 1fr 1fr ; grid - gap : 0.5em ; } div { border :​​​1 بكسل صلب ؛ } </ style > < body > < div class = "wrapper" > < h3 > العنوان 1 </ h3 >< h3 > العنوان 2 </ h3 >< h3 > العنوان 3 </ h3 > < div > القيمة 11 </ div >< div > القيمة 12 </ div >< div > القيمة 13 </ div > < div > القيمة 21 </ div >< div > القيمة 22 </ div >< div > القيمة 23 </ div > < div > القيمة 31 </ div >< div > القيمة 32 </ div >< div > القيمة 33 </ div > < div > القيمة 41 </ div >< div > القيمة 42 </ div >< div > القيمة 43 </ div > < div > القيمة 51 </ div >< div > القيمة 52 </ div >< div > القيمة 53 </ div > < div > القيمة 61 </ div >< div > value62 </ div >< div > value63 </ div > < div > value71 </ div ><<div> value72 </div> <div> value73 </div> </div> </body> </html>​​​​​​​​​​​​
الناتجتطبيق بسيط لتخطيط شبكة CSS يوضح تخطيط الجدول

مراجع

  1. ↑ "تاريخ نشر وحدة تخطيط شبكة CSS المستوى 1 - W3C" . W3C . بدون تاريخ . تم الاطلاع عليه بتاريخ 9 أبريل 2021 .
  2. 1 2 3 4 أتكينز الابن، تاب؛ ج. اعتماد، إليكا؛ أتاناسوف، روسن؛ بروفاو، أوريول؛ موغيليفسكي، أليكس؛ كوب، فيل؛ ميلكي، ماركوس، محررون. (18-12-2021). "وحدة تخطيط شبكة CSS المستوى 1" . اتحاد شبكة الويب العالمية (W3C ). مجموعة عمل اتحاد شبكة الويب العالمية . تم الاسترجاع في 9-04-2021 .
  3. 1 2 أتكينز الابن، تاب؛ ج. اعتماد، إليكا؛ أتاناسوف، روسن، محرران. (14-03-2023). "وحدة تخطيط شبكة CSS المستوى 2" . اتحاد شبكة الويب العالمية (W3C) . مجموعة عمل CSS . تم الاسترجاع في 26-03-2023 .
  4. ↑ موغيليفسكي، أليكس؛ كوب، فيل؛ ميلكي، ماركوس؛ غلازمان، دانيال، محرران. (2011-04-07). "تخطيط الشبكة" . اتحاد شبكة الويب العالمية . مجموعة عمل CSS . تم الاسترجاع في 2021-04-09 .
  5. ↑ موغيليفسكي، أليكس؛ ميلكي، ماركوس، محرران. (5 سبتمبر 2007). "وحدة تحديد موضع شبكة CSS، المستوى 3" . اتحاد شبكة الويب العالمية (W3C) . مجموعة عمل CSS . تم الاطلاع عليه بتاريخ 9 أبريل 2021 .
  6. ↑ "شبكة CSS - تصميم الجدول يعود من جديد. كن حاضرًا وكن مربعًا" . مطورو جوجل . يناير 2017. تم الاطلاع عليه بتاريخ 9 أبريل 2021 .
  7. ↑ "تخطيط شبكة CSS (المستوى 1) | هل يمكنني استخدام... جداول دعم HTML5 وCSS3 وما إلى ذلك" . caniuse.com . تم الاطلاع عليه بتاريخ 12 يناير 2022 .
  8. ↑ غوستافسون، آرون (19 أكتوبر 2017). "قصة شبكة CSS، من مبتكريها" . موقع A List Apart . تاريخ الاسترجاع: 12 يناير 2022 .
  9. ↑ أندرسون، كريم (13 سبتمبر 2017). "أحدث متصفح من مايكروسوفت يحصل على دفعة كبيرة مع EdgeHTML 16" . تم الاطلاع عليه بتاريخ 7 أكتوبر 2017 .
  10. ↑ بروتالينسكي، إميل (9 مارس 2017). "وصول كروم 57 مع تحسينات في تخطيط شبكة CSS وواجهة برمجة التطبيقات | فينشر بيت" . فينشر بيت . تم الاطلاع عليه في 7 أكتوبر 2017 .
  11. ↑ "تخطيط شبكة CSS" . هل يمكنني استخدامه ؟ (بدون تاريخ ). تم الاطلاع عليه بتاريخ 9 أبريل 2021 .
  12. ↑ ""grid" | هل يمكنني استخدام ... دعم الجداول لـ HTML5 و CSS3 وما إلى ذلك" .
  13. ^ أتيش ، فاروق (2017-04-13). "مودرنيزر 3.5.0" . أخبار الحداثة . تم الاسترجاع بتاريخ 2021-04-09 .
  14. ↑ "بداية/نهاية عمود الشبكة - Tailwind CSS" . تم الاطلاع عليه بتاريخ 13-04-2021 .
  15. ↑ غوتر، رافائيل (16 فبراير 2017). "شبكات وأطر عمل فليكس بوكس" . جيست جيت هاب . مؤرشف من الأصل في 16 فبراير 2017. تم الاطلاع عليه في 9 أبريل 2021 .
  16. ↑ Alligator.io (2020-09-03). "تخطيط شبكة CSS: وحدة Fr" . DigitalOcean . DigitalOcean . تم الاسترجاع في 2021-04-09 .
  17. ↑ ماركوت، إيثان (18 يوليو 2018). "الكسري. - إيثان ماركوت" . إيثان ماركوت . تم الاسترجاع في 9 أبريل 2021 .
  18. ↑ ريندل، روبن (12 يونيو 2017). "مقدمة لوحدة CSS 'fr'" . CSS-Tricks . تم الاطلاع عليه بتاريخ 9 أبريل 2021 .