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

بودكاست CSS - 011: الشبكة

التخطيط الشائع حقًا في تصميم الويب هو تخطيط الرأس والشريط الجانبي والنص الأساسي والتذييل.

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

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

نظرة عامة

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

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

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

تأتي شبكة Grid مع مجموعة من المصطلحات الجديدة، حيث إنها المرة الأولى التي تستخدم فيها 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" في فهم الأجزاء المختلفة من الشبكة.

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

الكلمات الرئيسية الأساسية لتغيير الحجم

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

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

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

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

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

في العرض التوضيحي التالي، جرب الكلمات الرئيسية المختلفة للحجم عن طريق تغيير حجم مسارات الشبكة.

وحدة fr

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

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

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

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

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

الدالة minmax()

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

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

الترميز repeat()

إذا كنت تريد إنشاء شبكة تتبع من 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 بكسل كحد أدنى و1fr كحد أقصى. تحدد الشبكة بعد ذلك مسارات 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). لنلقي الآن نظرة على كيفية تحديد موضع العناصر على الشبكة التي أنشأناها.

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

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

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

فهي تحتوي على اختصارات تتيح لك تعيين سطري البداية والنهاية في آن واحد:

• grid-column
• grid-row

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

.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". سيمتد العنصر مباشرة عبر الشبكة الصريحة.

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

قد تعتقد أنه يمكنك تقديم هذا العنصر إلى 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

السمة 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)

يمكن استخدام الاختصار 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;
}

محاذاة

يستخدم "تخطيط الشبكة" خصائص المحاذاة نفسها التي تعلمتها في دليل flexbox. في الشبكة، تُستخدَم دائمًا السمات التي تبدأ بـ 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 لمعرفة تأثير ذلك في التنسيق. لا يتغير حجم منطقة الشبكة، بدلاً من ذلك يتم نقل العناصر داخل المنطقة المحددة.

التحقّق من استيعابك

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

main {
  display: grid;
}

المراجِع

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

• تنسيق شبكة CSS من MDN
• دليل كامل حول الشبكة
• إنشاء حاوية على شكل شبكة
• فحص شبكة CSS في "أدوات مطوري البرامج في Chrome"
• مجموعة شاملة من المواد التعليمية على شكل مربّعات