معرّف الإصدار العالمي (GRid)

The CSS Podcast - 011: Grid

من التنسيقات الشائعة جدًا في تصميم الويب تنسيق العنوان والشريط الجانبي والنص الرئيسي والجزء السفلي.

عنوان يتضمّن شعارًا وشريط تنقّل مع شريط جانبي ومنطقة محتوى تعرض مقالة

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

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

نظرة عامة

ما هي الإجراءات التي يمكنك اتّخاذها باستخدام الشبكة؟ تتضمّن تنسيقات الشبكة الميزات التالية: ويمكنك الاطّلاع على كل هذه الميزات في هذا الدليل.

  1. يمكن تعريف الشبكة باستخدام الصفوف والأعمدة. يمكنك اختيار طريقة ضبط حجم مسارات الصفوف والأعمدة هذه أو يمكن أن تستجيب هذه المسارات لحجم المحتوى.
  2. سيتم تلقائيًا وضع العناصر المباشرة لحاوية الشبكة في هذه الشبكة.
  3. أو يمكنك وضع العناصر في الموقع الجغرافي الدقيق الذي تريده.
  4. يمكن تسمية الخطوط والمناطق على الشبكة لتسهيل عملية وضع الإعلانات.
  5. يمكن توزيع المساحة الفارغة في حاوية الشبكة بين المقاطع الصوتية.
  6. يمكن محاذاة عناصر الشبكة داخل منطقتها.

مصطلحات الشبكة

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

خطوط الشبكة

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

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

تمثيل مخطّط بياني لخطوط الشبكة

مسارات الشبكة

المسار هو المسافة بين خطَي الشبكة. يكون مسار الصف بين خطَّي صف، ويكون مسار العمود بين خطَّي عمود. عند إنشاء الشبكة، ننشئ هذه المسارات من خلال تحديد حجم لها.

مخطّط بياني يمثّل مسار شبكة

خلية شبكة

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

تمثيل مخطّط بياني لخلية شبكة

مساحة الشبكة

عدّة خلايا شبكة معًا يتم إنشاء مناطق الشبكة من خلال جعل العنصر يمتد على مسارات متعددة.

تمثيل بياني لمنطقة شبكة

الفجوات

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

تمثيل بياني لشبكة تتضمّن فراغات

حاوية الشبكة

عنصر HTML الذي تم تطبيق display: grid عليه، وبالتالي ينشئ سياقًا جديدًا لتنسيق الشبكة للعناصر الثانوية المباشرة.

.container {
  display: grid;
}

عنصر الشبكة

عنصر الشبكة هو عنصر فرعي مباشر لحاوية الشبكة.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

الصفوف والأعمدة

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

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

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

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

يمكن أن يساعدك تداخل الشبكة في Chrome DevTools على فهم الأجزاء المختلفة من الشبكة.

افتح الإصدار التجريبي في Chrome. تحقّق من العنصر الذي يضمّ خلفية رمادية بمعرّف container. ميِّز الشبكة من خلال اختيار شارة الشبكة في نموذج DOM بجانب العنصر .container. في علامة التبويب "التنسيق"، اختَر عرض أرقام الأسطر في القائمة المنسدلة للاطّلاع على أرقام الأسطر في الشبكة.

كما هو موضّح في الشرح والتعليمات
شبكة مميّزة في "أدوات مطوّري البرامج في Chrome" تعرض أرقام الأسطر والخلايا والمسارات

الكلمات الرئيسية ذات الحجم الثابت

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

  • min-content
  • max-content
  • fit-content()

ستؤدي الكلمة الرئيسية min-content إلى تصغير المقطع الصوتي إلى أصغر حجم ممكن بدون تداخل محتوى المقطع الصوتي. سيؤدي تغيير مثال تنسيق الشبكة ليكون هناك ثلاثة مسارات أعمدة بحجم min-content إلى أن تصبح المسارات ضيّقة بقدر أطول كلمة في المسار.

تُحدث الكلمة الرئيسية max-content تأثيرًا معاكسًا. سيصبح عرض المقطع الصوتي واسعًا بما يكفي لعرض كل المحتوى في سلسلة طويلة غير متقطعة. وقد يؤدي ذلك إلى حدوث عمليات تجاوز لأنّ السلسلة لن يتم لفّها.

تعمل الدالة fit-content() مثل max-content في البداية. ومع ذلك، بعد أن يصل المقطع الصوتي إلى الحجم الذي تمرره إلى الدالة، يبدأ المحتوى في اللف. وبالتالي، سينشئ fit-content(10em) مسارًا أقصر من 10em، إذا كان حجم max-content أصغر من 10em، ولكن لن يكون أبدًا أكبر من 10em.

في العرض الترويجي التالي، جرِّب كلمات الحجم الأساسي المختلفة من خلال تغيير حجم مسارات الشبكة.

وحدة fr

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

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

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

وبما أنّ وحدة fr تشارك المساحة المتوفّرة، يمكن دمجها مع فجوة بحجم ثابت أو مسارات بحجم ثابت. للحصول على مكوّن يتضمّن عنصرًا بحجم ثابت واستخدام المقطع الصوتي الثاني في أي مساحة متبقية، يمكنك استخدام grid-template-columns: 200px 1fr كقائمة أغانٍ.

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

دالة minmax()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

تعني هذه الدالة أنّه يمكنك ضبط حدّ أدنى وأقصى لحجم المقطع الصوتي. يمكن أن يكون هذا مفيدًا جدًا. إذا أخذنا مثال وحدة fr أعلاه التي توزّع المساحة المتبقية، يمكن كتابتها باستخدام minmax() على النحو التالي: minmax(auto, 1fr). تنظر الشبكة إلى الحجم الأساسي للمحتوى، ثم توزّع المساحة المتوفّرة بعد منح المحتوى مساحة كافية. وهذا يعني أنّه قد لا تحصل على مقاطع صوتية تحصل كلٌّ منها على حصة متساوية من كل المساحة المتوفّرة في حاوية الشبكة.

لاستخدام minmax لفرض حصول مقطع صوتي على حصة متساوية من المساحة في حاوية الشبكة مطروحًا منها الفجوات استبدِل 1fr بـ minmax(0, 1fr) كحجم مقطع صوتي. وهذا يجعل الحد الأدنى لحجم المقطع الصوتي هو 0 وليس الحد الأدنى لحجم المحتوى. ستأخذ الشبكة بعد ذلك كل المساحة المتوفّرة في الحاوية، وتخصم المساحة المطلوبة لأي فجوات، وتوزّع المساحة المتبقية وفقًا لوحدات fr.

repeat() رمز

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 76.
  • Safari: 10.1.

Source

إذا كنت تريد إنشاء شبكة مسارات تتضمّن 12 عمودًا بأعمدة متساوية، يمكنك استخدام ملف CSS التالي.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

أو يمكنك كتابته باستخدام repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

يمكن استخدام الدالة repeat() لتكرار أي قسم من قائمة الأغاني. على سبيل المثال، يمكنك تكرار نمط من الأغاني. يمكنك أيضًا إنشاء بعض المقاطع الصوتية العادية وقسم متكرّر.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill وauto-fit

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

يمكنك إجراء ذلك باستخدام repeat() والكلمات الرئيسية auto-fill أو auto-fit. في العرض التوضيحي أدناه، ستنشئ الشبكة عددًا من مسارات 200 بكسل يتناسب مع الحاوية. افتح العرض الترويجي في نافذة جديدة واطّلِع على كيفية تغيُّر الشبكة عند تغيير حجم مساحة العرض.

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

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

هناك فرق بسيط بين auto-fill وauto-fit. في العرض الترويجي التالي، يمكنك استخدام تنسيق شبكة باستخدام البنية الموضّحة أعلاه، ولكن باستخدام عنصرَي شبكة فقط في حاوية الشبكة. باستخدام الكلمة الرئيسية auto-fill، يمكنك الاطّلاع على المقاطع الصوتية الفارغة التي تم إنشاؤها. غيِّر الكلمة الرئيسية إلى auto-fit وسيتم تصغير المقاطع الصوتية إلى الحجم 0. وهذا يعني أنّ المسارات المرنة تكبر الآن لتستهلك المساحة.

تعمل الكلمات الرئيسية auto-fill وauto-fit بالطريقة نفسها تمامًا. لا فرق بينهما بعد ملء المسار الأول.

مواضع الإعلانات التلقائية

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

وضع العناصر في أعمدة

السلوك التلقائي لتخطيط الشبكة هو وضع العناصر على طول الصفوف. يمكنك بدلاً من ذلك وضع العناصر في الأعمدة باستخدام grid-auto-flow: column. عليك تحديد مسارات الصفوف وإلا ستنشئ العناصر مسارات أعمدة أساسية، وسيتم عرض كل العناصر في صف طويل واحد.

ترتبط هذه القيم بوضع الكتابة في المستند. يتم دائمًا عرض الصف في الاتجاه الذي تظهر به الجملة في وضع الكتابة للمستند أو المكوّن. في العرض الترويجي التالي، يمكنك تغيير قيمة grid-auto-flow وخاصية writing-mode.

الأغاني التي تمتد على عدة مقاطع

يمكنك جعل بعض العناصر أو جميعها في تنسيق مُوضَّح تلقائيًا تمتد على أكثر من مسار واحد. استخدِم الكلمة الرئيسية span بالإضافة إلى عدد الأسطر التي تريد أن تمتد عليها كقيمة grid-column-end أو grid-row-end.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

بما أنّك لم تحدّد grid-column-start، يتم استخدام القيمة الأولية auto ويتم وضعها وفقًا لقواعد مواضع الإعلانات التلقائية. يمكنك أيضًا تحديد القيمة نفسها باستخدام الاختصار grid-column:

.item {
    grid-column: auto / span 2;
}

ملء الفجوات

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

يوضّح العرض التوضيحي التالي هذا السلوك. سيؤدي وضع العلامة في المربّع إلى تطبيق وضع الحزمة الكثيفة. يتم تفعيل هذا الخيار من خلال منح grid-auto-flow قيمة dense. عند ضبط هذه القيمة، ستأخذ الشبكة العناصر في وقت لاحق من التنسيق وتستخدمها لملء الفجوات. قد يعني ذلك أنّ العرض يصبح غير مرتبط بالترتيب المنطقي.

وضع العناصر

لديك الكثير من الوظائف من CSS Grid. لنلقِ الآن نظرة على كيفية وضع العناصر في الشبكة التي أنشأناها.

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

في ما يلي السمات التي يمكنك استخدامها لوضع العناصر حسب رقم السطر:

تتضمّن اختصارات تتيح لك ضبط سطرَي البداية والنهاية في آنٍ واحد:

لوضع العنصر، اضبط سطرَي البدء والنهاية لمنطقة الشبكة التي يجب وضعه فيها.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

يمكن أن تقدّم لك أدوات مطوّري البرامج في Chrome دليلاً مرئيًا للسطور من أجل التحقّق من مكان وضع العنصر.

يتّبع ترقيم الأسطر وضع الكتابة واتجاه المكوّن. في العرض التقديمي التالي، يمكنك تغيير وضع الكتابة أو الاتجاه لمعرفة كيف يبقى موضع العناصر متسقًا مع طريقة تدفق النص.

تجميع العناصر

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

أرقام الأسطر السلبية

عند إنشاء شبكة باستخدام grid-template-rows وgrid-template-columns ، يتم إنشاء ما يُعرف باسم الشبكة الصريحة. هذه شبكة حدّدت فيها حجم المسارات.

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

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

باستخدام أرقام السطور السالبة، يمكنك وضع العناصر من سطر نهاية الشبكة الصريحة. يمكن أن يكون ذلك مفيدًا إذا كنت تريد أن يمتد عنصر من سطر العمود الأول إلى آخره. في هذه الحالة، يمكنك استخدام grid-column: 1 / -1. سيمتد العنصر على مستوى الشبكة الصريحة.

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

شريط جانبي يحتوي على 8 عناصر شبكة متداخلة

قد تعتقد أنّه يمكنك منح هذا العنصر grid-row: 1 / -1. في العرض التجريبي أدناه، يمكنك الاطّلاع على أنّ هذا الإجراء لا يعمل. يتم إنشاء المقاطع الصوتية في الشبكة الضمنية، ولا يمكن الوصول إلى نهاية الشبكة باستخدام -1.

تحديد حجم المسارات الضمنية

سيتم ضبط حجم المقاطع الصوتية التي تم إنشاؤها في الشبكة التلقائية تلقائيًا. إذا كنت تريد التحكّم في حجم الصفوف، استخدِم السمة grid-auto-rows، وبالنسبة إلى الأعمدة، grid-auto-columns.

لإنشاء جميع الصفوف الضمنية بحد أدنى 10em وحد أقصى auto:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

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

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

خطوط الشبكة المُعنوَنة

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

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

مناطق نموذج الشبكة

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

للبدء، امنح العناصر المباشرة لحاوية الشبكة اسمًا باستخدام السمة grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

يمكن أن يكون الاسم أيّ شيء تريده باستثناء الكلمات الرئيسية auto وspan. بعد تسمية كل العناصر، استخدِم سمة grid-template-areas لتحديد خلايا الشبكة التي سيشغلها كل عنصر. يتم تعريف كل صف بين علامتَي اقتباس.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

هناك بعض القواعد عند استخدام grid-template-areas.

  • يجب أن تكون القيمة شبكة كاملة بدون خلايا فارغة.
  • لتوسيع نطاق المقاطع الصوتية، كرِّر الاسم.
  • يجب أن تكون المناطق التي تم إنشاؤها من خلال تكرار الاسم مستطيلة ولا يمكن فصلها.

في حال مخالفة أيّ من القواعد أعلاه، يتم التعامل مع القيمة على أنّها غير صالحة ويتم تجاهلها.

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

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

بما أنّه يتم تحديد التنسيق بالكامل في مكان واحد، يسهل إعادة تحديد التنسيق باستخدام طلبات البحث عن الوسائط. في المثال التالي، أنشأت تنسيقًا من عمودَين ينتقل إلى ثلاثة أعمدة من خلال إعادة تحديد قيمة grid-template-columns وgrid-template-areas. افتح المثال في نافذة جديدة للعب بحجم إطار العرض والاطّلاع على تغيير التنسيق.

يمكنك أيضًا الاطّلاع على كيفية ارتباط سمة grid-template-areas بسمة writing-mode والاتجاه، بالإضافة إلى طرق الشبكة الأخرى.

خصائص الاختصار

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

grid-template

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

السمة grid-template هي اختصار لسمات grid-template-rows وgrid-template-columns وgrid-template-areas. يتمّ تحديد الصفوف أولاً، بالإضافة إلى قيمة grid-template-areas. تتم إضافة حجم العمود بعد /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid الموقع الإلكتروني

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

يمكن استخدام الاختصار grid بالطريقة نفسها تمامًا التي يتم بها استخدام الاختصار grid-template. وعند استخدامه بهذه الطريقة، ستتم إعادة ضبط خصائص الشبكة الأخرى التي يقبلها على قيمها الأولية. المجموعة الكاملة هي:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

يمكنك بدلاً من ذلك استخدام هذا الاختصار لتحديد سلوك الشبكة الضمنية، على سبيل المثال:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

محاذاة

يستخدم تنسيق الشبكة سمات المحاذاة نفسها التي تعرّفت عليها في دليل استخدام صندوق المرونة. في الشبكة، يتم دائمًا استخدام السمات التي تبدأ بـ justify- على المحور المضمّن، وهو الاتجاه الذي يتم فيه عرض الجمل في وضع الكتابة.

تُستخدَم السمات التي تبدأ بالرمز align- على محور الكتلة، وهو الاتجاه الذي يتم فيه ترتيب الكتل في وضع الكتابة.

  • justify-content وalign-content: توزيع مساحة إضافية في حاوية الشبكة حول المقاطع الصوتية أو بينها
  • justify-self و align-self: يتم تطبيقهما على عنصر شبكة لنقله داخل منطقة الشبكة التي تم وضعه فيها.
  • justify-items و align-items: يتم تطبيقهما على حاوية الشبكة لضبط جميع سمات justify-self على العناصر.

توزيع المساحة الإضافية

في هذا العرض الترويجي، تكون الشبكة أكبر من المساحة المطلوبة لعرض مسارات العرض ذات العرض الثابت. وهذا يعني أنّ لدينا مساحة في كلّ من سمتَي "العنصر المضمّن" و"العنصر المجمّع" للشبكة. جرِّب قيمًا مختلفة لكلّ من align-content وjustify-content لمعرفة كيفية سلوك المقاطع الصوتية.

يُرجى ملاحظة كيف تصبح الفجوات أكبر عند استخدام قيم مثل space-between، ويزداد أيضًا حجم أي عنصر شبكة يمتد على مقطعَين صوتيَّين لاستيعاب المساحة الإضافية التي تمت إضافتها إلى الفجوة.

نقل المحتوى

تظهر العناصر التي لها لون خلفية تملأ بالكامل مساحة الشبكة التي يتم وضعها فيها، لأنّ القيمة الأولية لسمة justify-self وسمة align-self هي stretch.

في العرض التجريبي، غيِّر قيمتَي justify-items وalign-items لمعرفة كيفية تغيير ذلك للتنسيق. لا يتغيّر حجم مساحة الشبكة، وبدلاً من ذلك، يتم نقل العناصر داخل المنطقة المحدّدة.

التحقّق من فهمك

اختبِر معلوماتك حول الشبكة

أيّ من المصطلحات التالية هي مصطلحات شبكة CSS؟

الخطوط
يتم تقسيم الشبكة بواسطة هذه الفواصل الأفقية والرأسية.
الدوائر
عذرًا، لا تتوفّر أيّ مفاهيم للدوائر في شبكة CSS.
خلايا
ينشئ تقاطع واحد بين صف وعمود خلية شبكة.
المناطق
خلايا متعددة معًا
تدريبات
عذرًا، لا تتوفّر أي مفاهيم حول القطارات في شبكة CSS.
الفجوات
المسافة بين الخلايا
مسارات
الصف أو العمود هو مسار في الشبكة.
 
main {
  display: grid;
}

ما هو اتجاه التخطيط التلقائي للشبكة؟

الصفوف
في حال عدم تحديد أي أعمدة، يتم ترتيب عناصر الشبكة في اتجاه الكتلة كما هو معتاد.
الأعمدة
إذا كان grid-auto-flow: column متوفّرًا، سيتمّ ترتيب الشبكة على شكل أعمدة.

ما هو الفرق بين auto-fit وauto-fill؟

سيؤدي auto-fit إلى تمديد الخلايا لتلائم الحاوية، بينما لن يؤدي auto-fill إلى ذلك.
تضع auto-fill أكبر عدد ممكن من العناصر في النموذج بدون تمديدها. تُعدّ ميزة "ملاءمة" مثالية لذلك.
سيُمدّد auto-fit الحاوية لكي تلائم الأطفال، بينما يُكيّف auto-fill الأطفال ليلائموا الحاوية.
هذا ليس سلوك هذه المواقع.

ما المقصود بـ min-content؟

0%
إنّ القيمة 0% هي قيمة نسبية للمربّع الرئيسي، في حين أنّ القيمة min-content تكون نسبية للكلمات والصور في المربّع.
أصغر حرف
على الرغم من أنّ هناك أصغر حرف، إلا أنّ min-content لا يشير إلى الأحرف.
أطول كلمة أو صورة
في العبارة "CSS رائع"، تكون كلمة "رائع" هي min-content.

ما المقصود بـ max-content؟

الجملة الأطول أو الصورة الأكبر
هذا هو الحد الأقصى للحجم الذي يطلبه محتوى المربّع أو حدّده. وهي عبارة عن جملة بعرضها الكامل أو صورة بعرضها الكامل.
الرسالة الأطول
على الرغم من أنّ هناك أطول حرف، إلا أنّ max-content لا يشير إلى الأحرف.
الكلمة الأطول.
أطول كلمة هي min-content.

ما هو المقصود بموضع الإعلان التلقائي؟

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

الموارد

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