{"id":"l-css-2-2","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"خطّط صفحة باستخدام grid-template-areas المسمّاة، وابنِ شبكة متحدّثين تختار عدد أعمدتها بنفسها باستخدام repeat(auto-fit, minmax()).","html":"

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

\n

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

\n

ارسم الصفحة بقوالب المناطق

\n

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

\n
layout.css
.page {\n  display: grid;\n  grid-template-columns: 14rem minmax(0, 1fr);\n  grid-template-areas:\n    \"header  header\"\n    \"filters main\";\n  gap: 1.5rem;\n}\n.site-header { grid-area: header; }\n.filters     { grid-area: filters; }\n.schedule    { grid-area: main; }
\n

كل سلسلة نصية صفّ، وكل كلمة داخلها عمود. تكرار الاسم (header header) يجعل تلك المنطقة تمتدّ على العمودين. والنقطة . تشير إلى خلية فارغة. ويجب أن تكون المناطق مستطيلة: الشكل على هيئة حرف L غير صالح، ويُسقَط التصريح كله.

\n

العائد يأتي حين يتغيّر التخطيط. على الشاشات الضيّقة يجب أن تجلس الفلاتر فوق الجلسات، فتعيد رسم السلاسل بدل نقل الـ HTML:

\n
CSS
@media (width < 48rem) {\n  .page {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas:\n      \"header\"\n      \"filters\"\n      \"main\";\n  }\n}
\n\n

وحدة fr وحدّها الأدنى الخفيّ

\n

تقسّم fr المساحة الحرّة في الشبكة بعد طرح الـ tracks الثابتة والفجوات. عمودان بقيمة 1fr في شبكة عرضها 600px مع فجوة 20px عرض كلٍّ منهما 290px.

\n

وهناك فخّ ستقابله عاجلًا أو آجلًا: 1fr اختصار لـ minmax(auto, 1fr)، وauto كحدّ أدنى تعني «على الأقل عرض المحتوى الأدنى (min-content)». ضع رابطًا طويلًا متصلًا أو كتلة كود في أحد العمودين فيتّسع ويسرق المساحة من الآخر. لهذا يستخدم هيكل الصفحة أعلاه minmax(0, 1fr): فهي تسمح للعمود الرئيسي بالتقلّص تحت حجم محتواه، ويُعالَج أيّ فيضان بداخله (بوضع overflow-x: auto على كتلة الكود مثلًا). إنها نظير إصلاح min-width: 0 من الدرس السابق، لكن في grid.

\n

شبكة متحدّثين تعدّ أعمدتها بنفسها

\n

في Waypoint 23 متحدّثًا. على الهاتف يجب أن يتكدّسوا عموديًا؛ وعلى الحاسوب المحمول أربعة أو خمسة في الصف. تصريح واحد يتعامل مع كل العروض:

\n
speakers.css
.speakers {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n}\n.speaker.featured {\n  grid-column: 1 / -1;\n}
\n

اقرأها من الداخل إلى الخارج. minmax(180px, 1fr) تقول إن كل عمود لا يقل عن 180px ولا يزيد على حصة متساوية من المساحة الحرّة. وrepeat(auto-fit, …) تطلب من المتصفّح أن ينشئ أكبر عدد ممكن من هذه الأعمدة يتّسع. في حاوية عرضها 640px بفجوات 16px، تتّسع ثلاثة أعمدة بعرض 180px (ثلاثة أعمدة وفجوتان تساوي 572px) ولا تتّسع أربعة، فتحصل على ثلاثة أعمدة يتمدّد كلٌّ منها إلى نحو 203px.

\n

grid-column: 1 / -1 تجعل متحدّث الـ keynote يمتدّ من الخط الأول إلى الأخير، أيًّا كان عدد الأعمدة. أرقام الخطوط السالبة تُعدّ من نهاية الشبكة الصريحة.

\n
\n شبكتان بالعرض نفسه في كلٍّ منهما عنصران. مع auto-fill يشغل العنصران عمودين من أربعة أعمدة متساوية ويبقى اثنان من الـ tracks الفارغة المتقطّعة. ومع auto-fit تنطوي الـ tracks الفارغة ويأخذ كل عنصر نصف العرض.\n auto-fill\n \n \n \n \n \n فارغ\n فارغ\n auto-fit\n \n \n \n
auto-fill تحتفظ بالـ tracks الفارغة، وauto-fit تطويها فتتمدّد العناصر
\n

الفرق بين auto-fit وauto-fill لا يظهر إلا حين تكون العناصر أقل من الأعمدة. auto-fill تحتفظ بالـ tracks الفارغة، فيبقى المتحدّثان بحجم البطاقة ويتركان فراغًا. وauto-fit تطوي الـ tracks الفارغة إلى الصفر، فيتمدّد المتحدّثان على امتداد الصف. ولشبكة متحدّثين تكاد تكون فارغة أحيانًا (اليوم الثاني فيه أربعة متحدّثين فقط)، اختر بحسب التصميم: auto-fill لعرض بطاقات ثابت، وauto-fit لصف ممتلئ.

\n\n

دورك الآن

\n

يعطيك التمرين هيكل الصفحة وشبكة المتحدّثين بأعمدة مكتوبة يدويًا. سمِّ المناطق، وحوّل المتحدّثين إلى auto-fit، واجعل الـ keynote يمتدّ على الصف كاملًا. تغيّر الفحوصات حجم الصفحة لتتأكّد من أن عدد الأعمدة يتكيّف. وبعدها ستجعل محتويات بطاقات grid تصطفّ عبر البطاقات باستخدام الـ subgrid.

\n","toc":[{"id":"sec-1","text":"ارسم الصفحة بقوالب المناطق","level":2},{"id":"sec-2","text":"وحدة fr وحدّها الأدنى الخفيّ","level":2},{"id":"sec-3","text":"شبكة متحدّثين تعدّ أعمدتها بنفسها","level":2},{"id":"sec-4","text":"دورك الآن","level":2}],"takeaways":["تتيح لك grid-template-areas أن ترسم التخطيط كأنه رسم بالحروف (ASCII art)، وإعادة ترتيب الصفحة لحجم شاشة آخر تعني إعادة رسم السلاسل النصية، لا نقل الـ HTML.","repeat(auto-fit, minmax(12rem, 1fr)) تنشئ أكبر عدد ممكن من الأعمدة التي تتّسع وتمدّدها لتملأ الصف، دون media queries.","auto-fill تحتفظ بالـ tracks (مسارات الشبكة) الفارغة حين تكون العناصر قليلة، بينما auto-fit تطويها فتتمدّد العناصر لتملأ الصف.","لـ 1fr حدّ أدنى تلقائي يساوي حجم المحتوى؛ استخدم minmax(0, 1fr) حين يجب السماح للـ track بالتقلّص تحت حجم محتواه."],"further":[{"title":"Grid template areas (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Grid_template_areas"},{"title":"repeat() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/repeat"},{"title":"Grid (web.dev Learn CSS)","url":"https://web.dev/learn/css/grid"}],"quiz":[{"q":"

شبكة متحدّثين تستخدم repeat(auto-fill, minmax(180px, 1fr)) في حاوية عرضها 900px، لكن فيها متحدّثان فقط. ماذا ترى؟

","options":[{"text":"بطاقتين عريضتين تتقاسمان الـ 900px كاملة.","why":"هذا سلوك auto-fit، التي تطوي الـ tracks الفارغة. أما auto-fill فتحتفظ بها."},{"text":"بطاقتين بعرض يقارب 180px، والـ tracks الفارغة ما زالت تشغل بقية الصف.","why":"صحيح. auto-fill تنشئ أكبر عدد من الـ tracks يتّسع (خمسة هنا) سواء وُجدت عناصر لها أم لا، فتجلس البطاقتان في أول عمودين من خمسة أعمدة متساوية."},{"text":"بطاقتين بعرض 180px بالضبط، محاذاتين للبداية، دون tracks إضافية.","why":"عرض البطاقتين قريب من ذلك فعلًا، لكن ليس لغياب الـ tracks الإضافية. هناك ثلاثة tracks فارغة موجودة وتحجز المساحة، وهذا بالضبط ما يُبقي البطاقتين ضيّقتين."}],"answer":1},{"q":"

ما الذي يضعه هذا التخطيط في الصف الثاني، العمود الأول؟

\n
CSS
.page {\n  display: grid;\n  grid-template-columns: 14rem 1fr;\n  grid-template-areas:\n    \"header header\"\n    \"filters main\";\n}
\n","options":[{"text":"العنصر الذي له grid-area: header.","why":"منطقة header تغطّي عمودي الصف الأول فقط."},{"text":"لا شيء؛ يجب أن تكون المناطق مستطيلة، لذا هذا غير صالح.","why":"كلتا المنطقتين هنا مستطيلتان (header بحجم 1×2، وfilters وmain بحجم 1×1)، لذا القالب صالح."},{"text":"العنصر الذي له grid-area: filters.","why":"صحيح. كل سلسلة صفّ وكل كلمة عمود، لذا فالعمود الأول في الصف الثاني هو filters."}],"answer":2},{"q":"

شبكة لها grid-template-columns: 1fr 1fr وُضعت في عمودها الأول كتلة كود فيها سطر طويل جدًا، فأصبح العمودان غير متساويين. ما الإصلاح؟

","options":[{"text":"grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)","why":"صحيح. لـ 1fr المجرّدة حدّ أدنى تلقائي يساوي حجم المحتوى الأدنى (min-content)؛ وminmax(0, 1fr) تزيل هذا الحدّ فيبقى العمودان متساويين."},{"text":"grid-template-columns: 50% 50%","why":"النسب المئوية تتجاهل الفجوة، فمع أيّ gap تفيض الشبكة خارج حاويتها."},{"text":"grid-auto-flow: dense","why":"dense تغيّر طريقة وضع العناصر في الفراغات؛ ولا تؤثّر في أحجام الـ tracks."},{"text":"justify-items: stretch","why":"هذه هي القيمة الافتراضية أصلًا، ولا تؤثّر إلا في كيفية ملء العناصر لخلاياها، لا في عرض الـ tracks."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
Waypoint Conf 2026
\n \n
\n
Keynote · Ana Ortiz
\n
Kenji Watanabe
\n
Layla Haddad
\n
Tom Becker
\n
Priya Nair
\n
Marcus Lee
\n
\n
","css":".page {\n width: 860px; /* fixed for this exercise */\n display: grid;\n gap: 20px;\n}\n.site-header, .filters, .speaker {\n padding: 12px;\n border-radius: 10px;\n background: #f5f3ff;\n}\n.page {\n grid-template-columns: 200px minmax(0, 1fr);\n}\n\n.speakers {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n}\n"},"solution":{"html":"
\n
Waypoint Conf 2026
\n \n
\n
Keynote · Ana Ortiz
\n
Kenji Watanabe
\n
Layla Haddad
\n
Tom Becker
\n
Priya Nair
\n
Marcus Lee
\n
\n
","css":".page {\n width: 860px; /* fixed for this exercise */\n display: grid;\n gap: 20px;\n}\n.site-header, .filters, .speaker {\n padding: 12px;\n border-radius: 10px;\n background: #f5f3ff;\n}\n.page {\n grid-template-columns: 200px minmax(0, 1fr);\n grid-template-areas:\n \"header header\"\n \"filters main\";\n}\n.site-header { grid-area: header; }\n.filters { grid-area: filters; }\n.speakers { grid-area: main; }\n\n.speakers {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 16px;\n}\n.speaker.featured {\n grid-column: 1 / -1;\n}\n"},"checks":[{"id":"uses-areas","test":"return style('.page', 'grid-template-areas') !== 'none';"},{"id":"header-spans","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; const h = box('.site-header'), f = box('.filters'), m = box('.speakers'); return Math.abs(h.width - 860) < 1 && f.top >= h.bottom && m.top >= h.bottom && f.right <= m.left;"},{"id":"three-columns","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; return cols() === 3;"},{"id":"featured-spans","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; return Math.abs(box('.speaker.featured').width - box('.speakers').width) < 1;"},{"id":"narrow-two-columns","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; const page = $('.page'); page.style.width = '620px'; await tick(16); const n = cols(); page.style.width = ''; await tick(16); return n === 2;"},{"id":"few-items-stretch","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; const hide = $$('.speaker').slice(0, 4); hide.forEach((el) => (el.style.display = 'none')); await tick(16); const w = box($$('.speaker')[4]).width; const main = box('.speakers').width; hide.forEach((el) => (el.style.display = '')); await tick(16); return Math.abs(w - (main - 16) / 2) < 1.5;"}],"title":"سمِّ المناطق ودع المتحدّثين يتدفّقون","prompt":"

عرض الصفحة ثابت عند 860px في هذا التمرين.

\n
    \n
  1. أعطِ .page تخطيطًا بـ grid-template-areas: header على العمودين في الصف الأول، ثم filters وmain جنبًا إلى جنب. وزّع .site-header و.filters و.speakers على تلك المناطق.
    2. \n
  2. استبدل repeat(3, 1fr) الثابتة في المتحدّثين بأعمدة لا يقل عرضها عن 180px، بأكبر عدد يتّسع، وتتمدّد لتملأ الصف حين يكون المتحدّثون قليلين.
    3. \n
  3. اجعل المتحدّث .featured يمتدّ على الصف كاملًا.
    4. \n
\n

تغيّر الفحوصات حجم الصفحة وتخفي بعض المتحدّثين لترى كيف تتفاعل شبكتك.

\n","hints":["كل سلسلة في grid-template-areas صفّ واحد؛ كرّر الاسم ليمتدّ على عدّة أعمدة.","للمتحدّثين تريد repeat() بكلمة مفتاحية تطوي الـ tracks الفارغة، وminmax() بحدّ أدنى 180px.","grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); و.speaker.featured { grid-column: 1 / -1; }."],"explanation":"

تصف grid-template-areas التخطيط على شكل صفوف من الأسماء؛ header header تمتدّ على العمودين وfilters main تضع الاثنين جنبًا إلى جنب، وgrid-area تُسقط كل عنصر في مكانه. وللمتحدّثين تضبط minmax(180px, 1fr) مدى كل عمود، وrepeat(auto-fit, …) تنشئ أكبر عدد يتّسع: ثلاثة في العمود الرئيسي بعرض 640px، واثنان حين تضيق الصفحة. ومع متحدّثَين ظاهرين فقط، تطوي auto-fit الـ tracks الفارغة فتتمدّد البطاقتان إلى نصف الصف لكلٍّ منهما؛ أما auto-fill فكانت ستتركهما ضيّقتين. وgrid-column: 1 / -1 تمدّ الـ keynote من أول خط في الشبكة إلى آخره، أيًّا كان عدد الأعمدة.

\n","checkLabels":{"uses-areas":"الصفحة تستخدم grid-template-areas","header-spans":"الرأس يمتدّ في الأعلى، والفلاتر على يسار المتحدّثين","three-columns":"المتحدّثون يشكّلون ثلاثة أعمدة عند هذا العرض","featured-spans":"المتحدّث المميّز يمتدّ على الصف كاملًا","narrow-two-columns":"الصفحة الأضيق تحصل على عمودين","few-items-stretch":"مع متحدّثَين فقط، يتمدّدان ليملآ الصف"}},"words":586,"readMinutes":3}