👦🏿 👨🏼‍⚖️ 🏇 شبكة CSS: كتابة تخطيط مجلة مستجيب من 20 سطرًا 🤷 🔵 🤹🏻

عملت مؤخرًا على تنفيذ حديث لقائمة المدونات (قائمة بالمدونات الخارجية المفيدة / المثيرة للاهتمام). كانت الفكرة هي تزويد القراء بمجموعة مختارة من أحدث المنشورات على هذه المدونات ، وتعبئتها في شكل مجلة ، بدلاً من قائمة جافة للروابط في الشريط الجانبي.

أسهل جزء من المهمة هو الحصول على قائمة بالمشاركات ومقتطفاتهم (مقتطفات - نص تمهيدي قبل القات) من خلاصات RSS المفضلة لدينا. للقيام بذلك ، استخدمنا المكون الإضافي لـ Feedzy lite WordPress ، والذي يمكنه تجميع العديد من الخلاصات في قائمة واحدة ، مرتبة حسب الوقت - الحل المثالي في حالتنا. الجزء الصعب هو جعل كل شيء جميل.

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

تبدو مناسبة مثالية لاستخدام CSS Grid! قم بإنشاء مخطط الشبكة لتخطيطات مختلفة ، على سبيل المثال ، عمود واحد من خمسة أعمدة وواحد من ثلاثة أعمدة ، ثم قم بالتبديل بينهما باستخدام استعلامات الوسائط بأحجام شاشة مختلفة. حق؟ ولكن هل نحتاج حقًا إلى استعلامات الوسائط هذه ، وكل هذه المشاكل في تحديد نقاط التحكم ، إذا كان بإمكانك فقط استخدام معلمة الشبكة auto-fit، والتي ستجعل الشبكة التكيفية بالنسبة لنا؟

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

بعد دراسة عدد من المقالات على CSS Grid ، وجدت أنها مقسمة بشكل رئيسي إلى نوعين:

كيفية إنشاء تخطيط مثير للاهتمام مع الامتدادات ، ولكن مع عدد معين من الأعمدة.
كيفية إنشاء تخطيط متكيف على الشبكة ، ولكن مع أعمدة من نفس العرض (أي بدون امتدادات).

أريد أن تنفذ الشبكة كلاً من ذلك وذاك: تخطيط متكيف بالكامل باستخدام تغيير حجم العناصر متعددة الأعمدة بشكل تكيفي.

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

فيما يلي مقارنة واضحة لمكوّن RSS الإضافي من الصندوق ونتائج عملنا (يمكن النقر عليها):

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

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

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

الرمز الذي يقع عليه التخطيط بأكمله قصير بشكل لا يصدق ، وكل ذلك بفضل روعة شبكة CSS:

.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: 32px;
  grid-auto-flow: dense;
}

/*    */
.article:nth-child(31n + 1) {
  grid-column: 1 / -1;
}
.article:nth-child(16n + 2) {
  grid-column: -3 / -1;
}
.article:nth-child(16n + 10) {
  grid-column: 1 / -2;
}

/*     */
@media (max-width: 459px) {
  .archive {
    display: flex;
    flex-direction: column;
  }
}

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

إنشاء شبكة تكيفية

لقد أنشأت 17 عنصرًا لعرض تنوع المحتوى المستقبلي - العناوين والصور والمقتطفات والملف <div></div>

<div class="archive">
  <article class="article">
    <!--  -->
  </article>

  <!--  16  -->

</div>

إن رمز تحويل هذه العناصر إلى شبكة تكيفية مضغوط بشكل خاص:

.archive {
  /*     - */
  display: grid;
  /*        ,       180 . */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  /*     */
  grid-gap: 1em;
}

← عرض توضيحي على CodePen

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

هنا في العمل ، نرى CSS Grid Magic يسمىauto-fit. تعمل هذه الكلمة الرئيسية بالاقتران مع الوظيفةminmax()المطبقة عليهاgrid-template-columns.

كيف تعمل

يمكن الحصول على التخطيط المكون من خمسة أعمدة نفسه كما يلي:

.archive {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

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

ل auto-fitاستخدام وظيفة ونحن في حاجة minmax(). وبالتالي ، فإننا نخبر المتصفح نوعًا ما بكمية ضغط الأعمدة ، ومقدار التمدد. عند الوصول إلى أحد الحدود ، يزيد عدد الأعمدة أو ينقص ، على التوالي.

.archive {
  grid-template-columns: repeat (auto-fit, minmax(180px, 1fr));
}

في هذا المثال ، سيحاول المتصفح استيعاب العديد من الأعمدة بعرض 180 بكسل. إذا كان هناك مساحة زائدة ، سيتم توسيع جميع الأعمدة ، وتقسيمها فيما بينها بالتساوي. هذا هو ما يملي المعنى 1fr: لجعل أحجام العمود متساوية الكسور ( الإجراءات fr ) للعرض المتاح.

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

→ عرض الفيديو

وكل هذه القدرة على التكيف بفضل سطر واحد من التعليمات البرمجية. جيد رائع؟

إنشاء امتدادات باستخدام "التدفق التلقائي: كثيف"

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

لإنشاء امتدادات متعددة الأعمدة ، يمكننا استخدام الخاصية grid-column: spanفي تلك العناصر التي يجب أن تشغل مساحة أكبر. افترض أننا نريد أن يكون عنصر القائمة الثالث بعرض عمودين:

.article:nth-child(3) {
  grid-column: span 2;
}

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

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

يرجى ملاحظة: ترتيب العناصر مكسور ، والآن العنصر الرابع أمام العنصر الثالث. على حد علمي ، لا يمكن تجاوز هذا ، وهذا أحد قيود CSS Grid التي يجب قبولها.

طرق تحديد الامتدادات

هناك عدة طرق لتحديد عدد الأعمدة التي يجب أن يشغلها العنصر. من الأسهل تطبيقه grid-columns: span [n]على أحد العناصر ، حيث nهو عدد الأعمدة التي سيشغلها العنصر. العنصر الثالث في تخطيطنا له خاصية مسجلة grid-column: span 2، وهو ما يفسر سبب عرضه ضعف حجم العناصر الأخرى.

لاستخدام طرق أخرى ، يجب عليك تحديد خطوط الشبكة . يتم ترقيم خطوط الشبكة على النحو التالي:

يمكن الإشارة إلى خطوط الشبكة من اليسار إلى اليمين بأرقام موجبة (على سبيل المثال ، 1 ، 2 ، 3) ، أو من اليمين إلى اليسار بأرقام سالبة (-1 ، -2 ، -3). يمكن استخدامها لوضع العناصر في الشبكة باستخدام خاصية grid-column، مثل هذا:

.grid-item {
  grid-column: ( ) / ( );
}

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

grid-column: 3 / 6
grid-column: -4 / -1
grid-column: 3 / span 3
grid-column: -4 / span 3
grid-column: span 3 / -1
إلخ

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

لكن أولاً ، نحن بحاجة إلى فهم المشكلة.

مشاكل التمرير الأفقي

فيما يلي بعض "العناصر المميزة" التي تم إنشاؤها باستخدام طريقة خط الشبكة (قابلة للنقر):

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

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

لماذا يحدث ذلك؟ تكمن المشكلة في أن المتصفح يحاول الامتثال لتوجيهاتنا الدقيقة لخطوط الشبكة. عند هذا العرض ، auto-fitيجب أن تعرض الشبكة عمودين فقط ، لكن نظام ترقيم خط المكدس الخاص بنا يتعارض مع هذا ، في إشارة تحديدًا إلى السطر الخامس. هذا التناقض يؤدي إلى الفوضى. لعرض الشبكة ذات العمودين بشكل صحيح ، يمكن استخدام الأرقام 1 و 2 و 3 و -3 و -2 و -1 فقط ، على النحو التالي:

ولكن إذا كان أحد عناصر شبكتنا يحتوي على تعليمات grid-columnخارج هذه الحدود ، على سبيل المثال 4 أو 5 أو -6 ، فإن المتصفح يتلقى تعليمات غامضة. من ناحية ، نطلب منك إنشاء أعمدة مرنة تلقائيًا (والتي يجب أن تظل - ضمنًا - عمودان في عرض الشاشة هذا). من ناحية أخرى ، أشرنا صراحة إلى خطوط الشبكة ، التي لا يمكن أن توجد في تنسيق عمودين. عندما يكون هناك تناقض بين الأعمدة الضمنية (التلقائية) ورقمها المحدد بوضوح ، تفضل الشبكة دائمًا تعريفًا صريحًا . هذه هي الطريقة التي تظهر بها الأعمدة غير المرغوبة والتجاوز الأفقي (ما يسمونه فقدان بيانات CSS) يمكن للامتدادات ، مثل أرقام خطوط الشبكة ، إنشاء تعريفات أعمدة صريحة. عمود الشبكة: الامتداد 3 (عنصر الشبكة الثامن في العرض) يجبر الشبكة على أن يكون لها ثلاثة أعمدة على الأقل ، على الرغم من أننا نريد عمودين ضمنيين.

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

حلول

كما اتضح ، فإن الحيلة هي تحديد الامتدادات باستخدام أرقام الأسطر المتاحة فقط لأضيق شبكة من تلك المخططة للعرض. في هذه الحالة ، نحن نتحدث عن شبكة من عمودين (تذكر ، نستخدم استعلام وسائط لعرض عمود واحد). وبالتالي ، يمكنك استخدام الأرقام 1 ، 2 ، 3 وأزواجها السلبية بأمان دون كسر الشبكة.

في البداية اعتقدت أنني سأقتصر على عرض الامتداد في عمودين باستخدام مجموعات الأرقام هذه:

grid column: span 2
grid-column: 1 /3
grid-column: -3 / -1

والتي تظل قابلة للتكيف بشكل مثالي حتى مكبري صوت:

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

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

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

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

ثم حاولت الجمع1/-3. عملت بشكل جيد على الشاشات العريضة - ملء ثلاثة أعمدة على الأقل - وعلى الأعمدة الضيقة - ملء عمود واحد فقط. اعتقدت أنه مع شبكة من عمودين ، سيظهر شيء غريب ، لأن السطر الأول من الشبكة هو نفسه السطر الموجود تحت الرقم -3. لدهشتي ، يتم عرض العنصر بشكل صحيح في عمود واحد.

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

ستجد هنا لائحة كاملة:

عرض قيم أعمدة الشبكة التكيفية على أحجام الشاشة المختلفة في شبكة الاحتواء التلقائي. ( تجريبي )

بشكل عام ، على الرغم من مجموعة فرعية محدودة من الامتدادات التكيفية ، هناك العديد من الفرص.

2/-2 - مزيج مثير للاهتمام ، يخلق امتدادًا مركزيًا يعمل وصولاً إلى شبكة العمود الواحد!
3/-1 - أقل فائدة لأنه يؤدي إلى تجاوز الحد حتى على عمودين.
3/-3 - مفاجأة سارة.

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

هذا الاستعلام عن الوسائط بسيط للغاية ، حتى دعنا نقول مباشرة. في مثالنا ، هو مسؤول عن تبديل عرض الشبكة إلى flexbox:

@media (max-width: 680px) {
  .archive {
    display: flex;
    flex-direction: column;
  }

  .article {
    margin-bottom: 2em;
  }
}

في ما يلي الشبكة النهائية ، التي قد تلاحظ أنها تستجيب تمامًا - من عمود إلى خمسة أعمدة (قابلة للنقر):

الاستخدام: nth-child () لتكرار العرض الديناميكي

لتقليل الكود الخاص بي إلى عشرين سطرًا ، قمت بتطبيق خدعة أخرى. :nth-child(n)سمح لي المُحدد بتصميم عدد كبير من العناصر دفعة واحدة. تم تطبيق فكرتي بالكامل مع الامتدادات على العديد من المشاركات في الخلاصة بحيث تظهر الكتل المحددة على الصفحة بانتظام. أولاً ، كتبت قائمة محدّدة مفصولة بفواصل برقم عنصر محدد بوضوح:

.article:nth-child(2),
.article:nth-child(18),
.article:nth-child(34),
.article:nth-child(50)  {
  background-color: rgba(128,0,64,0.8);
  grid-column: -3 / -1;
}

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

عندها أدركت أنه يمكنك استخدام الميزة الرائعة للمحدِّد الزائف :nth-child: بدلاً من قيمة عددية ، أدخل تعبيرًا ، على سبيل المثال :nth-child(2n+ 2)، يعني كل عنصر ثانوي.

هذه هي الطريقة التي استخدمتها :nth-child([])لإنشاء كتلة زرقاء كاملة العرض في شبكتي تظهر في أعلى الصفحة ثم في منتصف القائمة:

.article:nth-child(31n + 1) {
  grid-column: 1 / -1;
  background: rgba(11, 111, 222, 0.5);
}

قطعة من التعليمات البرمجية بين قوسين ( 31n + 1) هي المسؤولة عن اختيار الأول ، 32 ، 63 ، إلخ. عنصر تابع. يبدأ المستعرض الحلقة بدءًا من n = 0 ( 31 * 0 + 1 = 1) ، ثم n=1( 31 * 1 + 1 = 32) ، وأخيرًا n=2( 31 * 2 + 1 = 63). في الحالة الأخيرة ، يفهم المستعرض أنه لا يوجد عنصر تابع 63 ، ويتجاهل القاعدة ، ويوقف الدورة ويطبق القاعدة على العنصرين الأول والثاني والثلاثين.

أفعل شيئًا مشابهًا للكتل الأرجوانية التي تظهر على اليسار أو اليمين عبر الصفحة:

.article:nth-child(16n + 2) {
  grid-column: -3 / -1;
  background: rgba(128, 0, 64, 0.8);
}

.article:nth-child(16n + 10) {
  grid-column: 1 / -2;
  background: rgba(128, 0, 64, 0.8);
}

المحدد الأول للكتل الأرجوانية اليسرى. التعبير 16n + 2مسؤول عن تطبيق الأنماط على كل عنصر شبكة 16th ، بدءًا من العنصر الثاني.

المحدد الثاني هو للكتل الأرجواني الصحيح. الفاصل الزمني هو نفسه ( 16n) ، ولكن التحول مختلف ( 10). ونتيجة لذلك ، يتم العثور على هذه الكتل بانتظام على الجانب الأيمن من الشبكة ، في العناصر المرقمة 10 ، 26 ، 42 ، إلخ.

بالنسبة للأنماط المرئية لهذه العناصر ، استخدمت خدعة أخرى لتجنب تكرار التعليمات البرمجية. بالنسبة للأنماط الشائعة للكتل الأرجواني ( background-colorعلى سبيل المثال ، على سبيل المثال) ، يمكنك استخدام محدد واحد:

.article:nth-child(8n + 2) {
  background: rgba(128, 0, 64, 0.8);
  /* Other shared syling */
}

سيحدد هذا المحدد العناصر 2 و 10 و 18 و 26 و 34 و 42 و 50 والمزيد. وبعبارة أخرى ، يختار كل من الكتل اليمنى واليسرى.

هذا يعمل لأنه 8n- هذا هو النصف بالضبط 16n، وفرق التحول في المحددين هو أيضًا 8.

كلمة أخيرة

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

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

.article {
  grid-column: span 3, autofit;
}

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

.article {
  grid-column: auto, -1;
}

... من شأنه أن يمتد الامتداد على الحافة اليسرى للشبكة إلى نهاية الخط.

شبكة CSS: كتابة تخطيط مجلة مستجيب من 20 سطرًا