{"id":"l-css-2-3","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"استخدم الـ subgrid لتصطفّ أجزاء كل بطاقة جلسة (الوقت والعنوان والملخّص والقاعة) عبر صف البطاقات كله، أيًّا كان طول كل عنوان.","html":"

ضع ثلاث بطاقات جلسات من Waypoint جنبًا إلى جنب، وستقفز المشكلة أمامك. عنوانٌ يتّسع في سطر، وآخر يلتفّ على سطرين، وثالث على ثلاثة. كل بطاقة تخطّط محتواها بنفسها، فتبدأ الملخّصات على ثلاثة ارتفاعات مختلفة، وتشكّل تسميات القاعات في الأسفل درجًا. المصمّمون يلاحظون. والمستخدمون يلاحظون أقل، لكن الصفحة تبدو غير مكتملة.

\n

الإصلاحات القديمة كانت ارتفاعات ثابتة (تنكسر مع المحتوى الحقيقي)، أو JavaScript يقيس كل عنوان. أما الـ subgrid (الشبكة الفرعية) فيجعل البطاقات تتشارك مجموعة صفوف واحدة.

\n

لماذا لا تصطفّ الشبكات المتداخلة

\n

حين تصبح البطاقة display: grid، تنشئ tracks خاصة بها ومستقلة. صف العنوان فيها بارتفاع عنوانها هي؛ وصف العنوان في البطاقة المجاورة بارتفاع ذلك العنوان. لا شيء يربط بينهما، لأن كل بطاقة لا تعرف إلا محتواها.

\n

ما تريده هو أن يكون «صف العنوان» track واحدًا تتشاركه كل البطاقات في الصف البصري نفسه، ويتحدّد حجمه بأطول عنوان. وهذا الـ track المشترك يجب أن يعيش في الأب، أي شبكة .sessions، وعلى البطاقات أن تستعيره.

\n

استعارة صفوف الأب

\n
sessions.css
.sessions {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));\n  gap: 24px;\n}\n\n.session-card {\n  display: grid;\n  grid-row: span 4;              /* time, title, abstract, room */\n  grid-template-rows: subgrid;   /* use the parent's four rows */\n  row-gap: 8px;                  /* tighter than the parent's 24px */\n}
\n

تصريحان يؤدّيان العمل. grid-row: span 4 تجعل كل بطاقة تشغل أربعة صفوف من الشبكة الأب. وgrid-template-rows: subgrid تخبر البطاقة ألّا تنشئ صفوفها الخاصة بل تستخدم الصفوف الأربعة التي تمتدّ عليها. ويوضع أبناء البطاقة الأربعة (الوقت والعنوان والملخّص والقاعة) في صفوف الأب تلك بالترتيب.

\n

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

\n
\n يسارًا: ثلاث بطاقات لكتل عناوينها ارتفاعات مختلفة، فتقع تسميات القاعات تحتها على ارتفاعات مختلفة. يمينًا: البطاقات الثلاث نفسها بخطوط صفوف مشتركة، فتتشارك العناوين صفًا طويلًا واحدًا وتصطفّ تسميات القاعات.\n صفوف خاصة\n \n \n \n \n \n \n \n \n \n القاعات غير متحاذية\n صفوف subgrid\n \n \n \n \n \n \n \n \n \n \n \n صفوف مشتركة ومتحاذية\n
دون الـ subgrid تحدّد كل بطاقة أحجام صفوفها، ومعه تتشارك صفوف الأب
\n

لاحظ أن الأب لا يعلن grid-template-rows أبدًا. لا يحتاج إلى ذلك: امتداد البطاقات ينشئ صفوفًا ضمنية، وتتحدّد أحجام هذه الصفوف من المحتوى الذي تضعه فيها الـ subgrids. وكل صف جديد من البطاقات يحصل على tracks أربعة خاصة به، فتصطفّ البطاقات في الصف البصري الثاني فيما بينها لا مع الصف الأول، وهذا ما تريده.

\n\n

الفجوات والخطوط والأعمدة

\n

يرث الـ subgrid الـ gap من الأب. الأب هنا يستخدم 24px بين البطاقات، وهذا أكثر بكثير مما ينبغي بين العنوان وملخّصه، لذا تتجاوز البطاقة row-gap في الـ tracks الخاصة بها. أما المسافة بين البطاقات فلا تتأثّر.

\n

ويعمل الـ subgrid على الأعمدة أيضًا. حالة كلاسيكية في Waypoint هي نموذج الملف الشخصي للمتحدّث: التسميات في عمود، والحقول في العمود التالي، وعمود التسميات بالعرض نفسه عبر عدّة fieldsets. جعل كل fieldset grid-column: span 2; grid-template-columns: subgrid يعطي كل fieldset أعمدة النموذج الخارجي، فتصطفّ التسميات حتى الأسفل. وخطوط الشبكة المسمّاة في الأب مرئية أيضًا داخل الـ subgrid، لذا تظل grid-column: content-start / content-end تعمل بمستوى أدنى.

\n\n

دورك الآن

\n

يعطيك التمرين ثلاث بطاقات جلسات بعناوين مختلفة الطول. حوّل كل بطاقة إلى subgrid للصفوف لتصطفّ الملخّصات وتسميات القاعات عبر الصف. تقارن الفحوصات المواضع الرأسية لتلك الأجزاء عبر البطاقات. ويبقى الدرس التالي مع الأحجام: min() وmax() وclamp() والكلمات المفتاحية التي تترك للمحتوى أن يقرّر حجم الأشياء.

\n","toc":[{"id":"sec-1","text":"لماذا لا تصطفّ الشبكات المتداخلة","level":2},{"id":"sec-2","text":"استعارة صفوف الأب","level":2},{"id":"sec-3","text":"الفجوات والخطوط والأعمدة","level":2},{"id":"sec-4","text":"دورك الآن","level":2}],"takeaways":["الشبكة المتداخلة التي لها grid-template-rows: subgrid تستخدم صفوف الـ tracks الخاصة بالأب بدل أن تنشئ صفوفها، فيتشارك المحتوى في البطاقات الشقيقة الصفوف نفسها.","يجب أن يمتدّ العنصر الذي يستخدم الـ subgrid على عدد من tracks الأب يساوي عدد أجزائه، مثل grid-row: span 4 لبطاقة من أربعة أجزاء.","يرث الـ subgrid الفجوة (gap) من الأب افتراضيًا، ويستطيع تجاوزها بـ row-gap أو column-gap خاصة به.","الـ subgrid ضمن Baseline منذ سبتمبر 2023 ومتاح على نطاق واسع منذ مارس 2026، لذا لم تعد تخطيطات البطاقات المتحاذية تحتاج إلى ارتفاعات ثابتة أو قياسات بـ JavaScript."],"further":[{"title":"Subgrid (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Subgrid"},{"title":"CSS subgrid (web.dev)","url":"https://web.dev/articles/css-subgrid"}],"quiz":[{"q":"

لكل بطاقة أربعة أبناء (الوقت والعنوان والملخّص والقاعة). لماذا لا تصطفّ القاعات؟

\n
CSS
.sessions { display: grid; grid-template-columns: repeat(3, 1fr); }\n.session-card { display: grid; grid-template-rows: subgrid; }
\n","options":[{"text":"البطاقة لا تمتدّ إلا على صف واحد من صفوف الأب، فليس لدى الـ subgrid إلا track واحد يتشاركه.","why":"صحيح. الـ subgrid لا يتبنّى إلا tracks الأب التي يمتدّ عليها، ولا يستطيع إضافة صفوف ضمنية خاصة به. ومع track واحد، يقع الأبناء الأربعة في الصف نفسه ويتراكبون."},{"text":"subgrid تعمل على الأعمدة فقط لا على الصفوف.","why":"subgrid تعمل على أيّ من المحورين أو على كليهما: grid-template-rows: subgrid وgrid-template-columns: subgrid."},{"text":"الأب يحتاج إلى grid-template-rows: subgrid هو الآخر.","why":"الأب هو الشبكة التي تملك الـ tracks؛ والشبكة المتداخلة وحدها تستخدم الكلمة المفتاحية subgrid."}],"answer":0},{"q":"

ما الطريقة الأمتن لجعل تسمية القاعة في كل بطاقة تصطفّ عبر الصف حين تلتفّ العناوين على أعداد مختلفة من الأسطر؟

","options":[{"text":"أعطِ كل عنوان ارتفاعًا ثابتًا height: 3em.","why":"السطر الرابع من العنوان سيفيض، والعنوان ذو السطر الواحد يترك فراغًا؛ الارتفاعات الثابتة تنكسر لحظة يتغيّر المحتوى."},{"text":"قِس أطول عنوان بـ JavaScript واضبط البقية لتطابقه.","why":"ينجح، لكنه بطيء، ويُعاد تشغيله مع كل تغيير في الحجم وكل تحميل للخطوط، وهو بالضبط العمل الذي يؤديه الـ subgrid الآن في CSS."},{"text":"اجعل كل بطاقة subgrid للصفوف يمتدّ على أربعة صفوف من الأب.","why":"صحيح. كل البطاقات في الصف تتشارك الـ tracks الأربعة نفسها، فيكبر كل track ليتّسع لأطول محتوى، ويصطفّ كل ما تحته."}],"answer":2},{"q":"

للشبكة الأب gap: 24px، والبطاقات التي تستخدم الـ subgrid تبدو متباعدة أكثر من اللازم من الداخل. ماذا تغيّر؟

","options":[{"text":"اضبط gap: 0 على الشبكة الأب.","why":"هذا يزيل أيضًا المسافة بين البطاقات نفسها، وهي التي أردت الإبقاء عليها."},{"text":"اضبط row-gap: 8px على البطاقة التي تستخدم الـ subgrid.","why":"صحيح. الـ subgrid يرث فجوات الأب افتراضيًا، لكنه يستطيع تجاوزها في الـ tracks الخاصة به."},{"text":"أضف margins سالبة إلى أبناء البطاقة.","why":"الـ margins السالبة تحارب التخطيط بدل أن تضبطه، وتنكسر حين تتغيّر الفجوة."},{"text":"لا شيء؛ الفجوة الموروثة لا يمكن تغييرها في الـ subgrid.","why":"الفجوة يمكن تجاوزها؛ أحجام الـ tracks وحدها هي التي تأتي من الأب."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
\n

09:30

\n

Subgrid

\n

Aligning card content across a row without fixed heights.

\n

Room A

\n
\n
\n

10:15

\n

Container Queries in a Design System With Forty Components

\n

What changed when every component started measuring itself.

\n

Room B

\n
\n
\n

11:00

\n

Color Spaces for Humans Who Ship Interfaces Every Day of the Week

\n

oklch(), color-mix() and palettes that stay accessible.

\n

Main hall

\n
\n
","css":".sessions {\n width: 660px; /* fixed for this exercise */\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n}\n.session-card {\n padding: 12px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n.session-card > * { margin: 0; }\n.time { color: #6b7280; font-size: 0.85rem; }\nh3 { font-size: 1rem; }\n.room { font-weight: 600; color: #6d28d9; }\n\n/* Make each card a row subgrid here */\n"},"solution":{"html":"
\n
\n

09:30

\n

Subgrid

\n

Aligning card content across a row without fixed heights.

\n

Room A

\n
\n
\n

10:15

\n

Container Queries in a Design System With Forty Components

\n

What changed when every component started measuring itself.

\n

Room B

\n
\n
\n

11:00

\n

Color Spaces for Humans Who Ship Interfaces Every Day of the Week

\n

oklch(), color-mix() and palettes that stay accessible.

\n

Main hall

\n
\n
","css":".sessions {\n width: 660px; /* fixed for this exercise */\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n}\n.session-card {\n padding: 12px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n.session-card > * { margin: 0; }\n.time { color: #6b7280; font-size: 0.85rem; }\nh3 { font-size: 1rem; }\n.room { font-weight: 600; color: #6d28d9; }\n\n.session-card {\n display: grid;\n grid-row: span 4;\n grid-template-rows: subgrid;\n row-gap: 8px;\n}\n"},"checks":[{"id":"three-across","test":"return new Set($$('.session-card').map((el) => Math.round(el.getBoundingClientRect().top))).size === 1;"},{"id":"uses-subgrid","test":"return $$('.session-card').every((el) => style(el, 'grid-template-rows').startsWith('subgrid'));"},{"id":"abstracts-align","test":"const tops = (sel) => $$(sel).map((el) => el.getBoundingClientRect().top); const same = (arr) => Math.max(...arr) - Math.min(...arr) < 1; return same(tops('.abstract'));"},{"id":"rooms-align","test":"const tops = (sel) => $$(sel).map((el) => el.getBoundingClientRect().top); const same = (arr) => Math.max(...arr) - Math.min(...arr) < 1; return same(tops('.room'));"},{"id":"no-overlap","test":"return $$('.session-card').every((card) => { const kids = [...card.children].map((c) => c.getBoundingClientRect()); return kids.every((r, i) => i === 0 || r.top >= kids[i - 1].bottom - 0.5); });"}],"title":"اجعل بطاقات الجلسات تصطفّ","prompt":"

البطاقات الثلاث موضوعة في شبكة من ثلاثة أعمدة، لكن عناوينها تلتفّ على أعداد مختلفة من الأسطر، فتقع الملخّصات وتسميات القاعات على ارتفاعات مختلفة. اجعل كل .session-card subgrid للصفوف يمتدّ على الأجزاء الأربعة (الوقت والعنوان والملخّص والقاعة)، بحيث يبدأ كل ملخّص على الارتفاع نفسه وتصطفّ كل تسمية قاعة. أبقِ البطاقات جنبًا إلى جنب ولا تستخدم ارتفاعات ثابتة.

\n","hints":["يجب أن تشغل البطاقة أربعة صفوف من الشبكة الأب قبل أن تستطيع استعارتها.","تصريحان على البطاقة يؤدّيان معظم العمل: امتداد واحد وsubgrid واحدة. وتحتاج البطاقة أيضًا إلى display: grid.",".session-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; } (أضف row-gap إن بدت المسافات واسعة)."],"explanation":"

grid-row: span 4 تجعل كل بطاقة تشغل أربعة صفوف من شبكة .sessions، وgrid-template-rows: subgrid تجعل البطاقة تستخدم تلك الصفوف بدل إنشاء صفوفها الخاصة. أصبح حجم كل صف في الأب يتحدّد الآن بأطول عنصر وُضع فيه من البطاقات الثلاث، فيتّسع صف العنوان لأطول عنوان، ويبدأ كل ملخّص وكل تسمية قاعة على الخط نفسه. ودون الامتداد يكون للبطاقة track واحد تتشاركه، فيوضع أبناؤها كلهم في ذلك الصف الواحد ويتراكبون.

\n","checkLabels":{"three-across":"البطاقات ما زالت جنبًا إلى جنب","uses-subgrid":"كل بطاقة تستخدم grid-template-rows: subgrid","abstracts-align":"كل الملخّصات تبدأ على الارتفاع نفسه","rooms-align":"كل تسميات القاعات تصطفّ","no-overlap":"لا شيء يتراكب داخل أيّ بطاقة"}},"words":596,"readMinutes":4}