استكشاف شبكة CSS الضمنية وصلاحيات التنسيب التلقائي

عند العمل باستخدام CSS Grid ، فإن أول شيء يجب فعله هو ضبط display: grid على العنصر الذي نريد أن نصبح حاوية شبكة. ثم نحدد الشبكة بشكل صريح باستخدام مزيج من grid-template-columns, grid-template-rowsو grid-template-areas. ومن هناك ، فإن الخطوة التالية هي وضع العناصر داخل الشبكة.

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

"صريحة ضمنية؟ ما الذي يحدث هنا؟"

مصطلحات غريبة ، أليس كذلك؟ مانويل ماتوزوفيتش بالفعل لديها شرح جيد لما يمكننا من خلال "ضمني" و "صريح" في CSS Grid ، لكن دعنا نتعمق في ماذا ال sPECIFICATION يقول:

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

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

ماذا عن التنسيب التلقائي؟

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

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

الشريط الجانبي الديناميكي

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

main {
  display: grid;
  grid-template-columns: 1fr;
}

عمود واحد فقط يشغل كل المساحة الخالية. هذه هي شبكتنا "الصريحة". تم إعداده لملاءمة عنصر شبكة واحد في main حاوية الشبكة. هذا كل شئ. عمود واحد وصف واحد:

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

يمكننا تحريك <aside> إلى عمود بجانب <section>:

aside {
  grid-column-start: 2;
}

وإليك ما تخبرنا به DevTools الآن:

نضع العنصر في العمود الثاني ولكن ... ليس لدينا عمود ثان. الحق غريب؟ لم نعلن أبدًا عن عمود ثانٍ في <main> حاوية شبكية ، لكن المتصفح أنشأ واحدًا لنا! هذا هو الجزء الأساسي من المواصفات التي نظرنا إليها:

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

تتيح لنا هذه الميزة القوية الحصول على تخطيطات ديناميكية. إذا كان لدينا فقط <section> عنصر ، كل ما نحصل عليه هو عمود واحد. ولكن إذا أضفنا <aside> عنصر في المزيج ، يتم إنشاء عمود إضافي لاحتوائه.

يمكننا وضع ملف <aside> أمام <section> بدلا من ذلك مثل هذا:

aside {
  grid-column-end: -2;
} 

يؤدي هذا إلى إنشاء العمود الضمني في بداية الشبكة ، بخلاف الكود السابق الذي يضع العمود الضمني في النهاية.

يمكننا فعل الشيء نفسه بسهولة أكبر باستخدام grid-auto-flow لتعيين أي وجميع المسارات الضمنية للتدفق في ملف column اتجاه:

الآن ليس هناك حاجة للتحديد grid-column-start لوضع ال <aside> عنصر على يمين <section>! في الواقع ، أي عنصر شبكة آخر نقرر طرحه هناك في أي وقت سوف يتدفق الآن في اتجاه عمود ، كل عنصر يتم وضعه في مسارات الشبكة الضمنية الخاصة به. مثالي للحالات التي لا يكون فيها عدد العناصر في الشبكة معروفًا مسبقًا!

ومع ذلك ، ما زلنا بحاجة grid-column-end إذا أردنا وضعها في عمود على يسارها ، وإلا ، فإن <aside> سيحتل العمود الصريح والذي بدوره يدفع <section> خارج الشبكة الصريحة وإجبارها على أخذ العمود الضمني.

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

في المثال الأول ، لم نحدد أي موضع. في هذه الحالة ، سيضع المتصفح أولاً ملف <aside> عنصر في العمود الصريح لأنه يأتي أولاً في DOM. ال <section>، في غضون ذلك ، يتم وضعها تلقائيًا في عمود الشبكة الذي ينشئه المتصفح تلقائيًا (أو ضمنيًا) لنا.

في المثال الثاني ، قمنا بتعيين <aside> عنصر خارج الشبكة الصريحة:

aside {
  grid-column-end: -2;
}

الآن لا يهم ذلك <aside> يأتي أولاً في HTML. عن طريق إعادة التعيين <aside> في مكان آخر ، قمنا بعمل <section> عنصر متاح لأخذ العمود الصريح.

شبكة الصورة

لنجرب شيئًا مختلفًا مع شبكة من الصور حيث لدينا صورة كبيرة وبعض الصور المصغرة بجانبها (أو تحتها).

لدينا تكوينان للشبكة. لكن خمن ماذا؟ أنا لا أحدد أي شبكة على الإطلاق! كل ما أفعله هو هذا:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

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

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

انتظر! لا grid-area الخاصية التي نستخدمها للتعريف المناطق المسماة بدلاً من حيث تبدأ العناصر وتنتهي على الشبكة؟

نعم ، لكنها تفعل المزيد أيضًا. يمكننا أن نكتب الكثير عن grid-area، ولكن في هذه الحالة بالذات:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

يمكننا رؤية نفس الشيء عند فتح DevTools لتوسيع إصدار الاختزال:

هذا يعني أن عنصر الصورة الأول في الشبكة يجب أن يمتد ثلاثة أعمدة و ثلاثة صفوف. ولكن نظرًا لأننا لم نحدد أي أعمدة أو صفوف ، فإن المتصفح يفعل ذلك لنا.

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

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

كل هذا من سطر واحد من CSS! هذه هي قوة الشبكة "الضمنية" والتنسيب التلقائي.

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

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

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.grid img:first-child {
  grid-area: span 3 / span 3;
}

لكن يمكننا إضافة عمود رابع ببساطة عن طريق تغييره إلى 4 في حين أن:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

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

تخطيطات ديناميكية

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

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

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

بت عندما نضيف العنصر الثاني ، نقوم بإنشاء عمود آخر (ضمني) باستخدام grid-column-start: 2.

عندما نضيف عنصرًا ثالثًا ، يجب أن يأخذ عرض عمودين - ولهذا استخدمنا grid-column-start: span 2، ولكن فقط إذا كانت :last-child لأنه إذا (ومتى) أضفنا عنصرًا رابعًا ، فيجب أن يشغل هذا العنصر عمودًا واحدًا فقط.

إضافة ذلك ، لدينا أربعة تكوينات للشبكة في حين إعلانين وسحر الشبكة الضمنية:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

لنجرب طريقة أخرى:

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

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

هل بدأت في الحصول على الحيلة؟ نقدم للمتصفح إرشادات محددة بناءً على عدد العناصر (باستخدام :nth-child) وأحيانًا ، يمكن لإرشادات واحدة تغيير التخطيط بالكامل.

تجدر الإشارة إلى أن الحجم لن يكون هو نفسه عندما نعمل مع محتوى مختلف:

نظرًا لأننا لم نحدد أي أحجام لعناصرنا ، فإن المتصفح يقوم تلقائيًا بتحديد حجمها لنا بناءً على محتوياتها وقد ينتهي بنا الأمر بحجم مختلف عما رأيناه للتو. للتغلب على هذا ، يجب علينا صراحة حدد أن جميع الأعمدة والصفوف متساوية في الحجم:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

مرحبًا ، لم نلعب بهذه الخصائص حتى الآن! grid-auto-rows و grid-auto-columns قم بتعيين حجم الصفوف والأعمدة الضمنية ، على التوالي ، في حاوية الشبكة. أو ، مثل المواصفات يشرح ذلك:

• grid-auto-columns و grid-auto-rows تحدد الخصائص حجم المسارات التي لم يتم تعيين حجم لها grid-template-rows or grid-template-columns.

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

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

ماذا يحدث مع ذلك grid-auto-rows ولماذا يأخذ ثلاث قيم؟ هل نحدد ثلاثة صفوف؟

لا ، نحن لا نحدد ثلاثة صفوف. ولكننا . تعريف ثلاث قيم كنمط لصفوفنا الضمنية. المنطق هو كما يلي:

• إذا كان لدينا صف واحد ، فسيتم تغيير حجمه بالقيمة الأولى.
• إذا كان لدينا صفان ، فسيحصل الأول على القيمة الأولى والثاني على القيمة الثانية.
• إذا كان لدينا ثلاثة صفوف ، فسيتم استخدام القيم الثلاث.
• إذا كان لدينا أربعة صفوف (وهنا يأتي الجزء المثير للاهتمام) ، فإننا نستخدم القيم الثلاث للصفوف الثلاثة الأولى ونعيد استخدام القيمة الأولى مرة أخرى للصف الرابع. هذا هو السبب في أنه نوع من النمط نكرره لتغيير حجم كل الصفوف الضمنية.
• إذا كان لدينا 100 صف ، فسيكون حجمها ثلاثة في ثلاثة 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr، الخ.

الغاء الاعجاب grid-template-rows الذي يحدد عدد الصفوف وأحجامها ، grid-auto-rows صف الأحجام فقط الذي قد يتم إنشاؤه على طول الطريق.

إذا عدنا إلى مثالنا ، فإن المنطق هو أن يكون لها حجم متساوٍ عند إنشاء صفين (سنستخدم الامتداد 2fr 2fr) ، ولكن إذا تم إنشاء الصف الثالث ، فإننا نجعله أصغر قليلاً.

أنماط الشبكة

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

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

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

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

الآن ، دعنا نحدد الشبكة ونقوم بإعداد النمط العام باستخدام :nth-child محدد للتبديل بين العناصر:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

قلنا أن النمط الخاص بنا يتكرر كل أربعة عناصر ، لذلك سنستخدمها منطقيًا 4n + x أين x من 1 إلى 4. من الأسهل قليلاً شرح النمط بهذه الطريقة:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

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

هؤلاء :nth-child المحددات يمكن أن تكون خادعة! كريس لديه مساعدة فائقة شرح كيف يعمل كل شيء، بما فيها وصفات لخلق أنماط مختلفة.

الآن نقوم بتهيئة كل عنصر بحيث:

1. يجب أن يأخذ العنصر الأول عمودين ويبدأ من العمود الأول (grid-column: 1/span 2).
2. يتم وضع العنصر الثاني في العمود الثالث (grid-column-start: 3).
3. يتم وضع العنصر الثالث في العمود الأول: (grid-column-start: 1).
4. يأخذ العنصر الرابع عمودين ويبدأ من العمود الثاني: (grid-column: 2/span 2).

هنا هذا في CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

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

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

.grid :nth-child(4n + 3) { grid-column-start: 1; }

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

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

ولكن هيا يمكننا التنزه بشكل أفضل! يمكننا أيضًا إزالة هذا:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

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

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

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

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

لماذا لا تستخدم grid-template-columns لتحديد الأعمدة الصريحة لأننا نعرف عدد الأعمدة؟

بإمكاننا أن نفعل ذلك! هذا هو الكود الخاص بها:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

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

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

لنجرب نمطًا آخر ، أسرع قليلاً هذه المرة:

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

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

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

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

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

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

لكن هذا لا يعمل لأنه يفرض على كل 6n + 3 العناصر المطلوب وضعها في نفس المنطقة مما يؤدي إلى إنشاء تخطيط مختلط. الحل الحقيقي هو الاحتفاظ بالتعريف الأولي للعنصر الثالث وإضافة grid-auto-flow: dense لملء الفجوات. من MDN:

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

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

لماذا لا تضيف هذه الخاصية دائما بشكل افتراضي؟

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

إذن ، الكود النهائي لدينا هو:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

واحدة أخرى؟ لنذهب!

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

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

سأتركك بنمط أخير:

أفعل لديك حل لهذا ولكن حان دورك للتدرب. خذ كل ما تعلمناه وحاول ترميز هذا بنفسك ثم قارنه مع الحل الذي قدمته. لا تقلق إذا انتهيت بشيء مطوّل - أهم شيء هو إيجاد حل عملي.

هل تريد المزيد؟

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

اختتام

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

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

وبالمثل ، قد ترغب في القراءة عنها grid-auto-columns في CSS-Tricks Almanac لأن مجتبى سيدي يتعمق في التفاصيل ويتضمن صورًا مفيدة بشكل لا يصدق للمساعدة في شرح السلوك.

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