تخطيطات CSS والتصميم السريع الاستجابة

ميزات الويب: Flexbox flex-wrap: balance Grid Subgrid طلبات البحث عن الحاوية (الحجم) <dialog> Popover تحديد موضع الارتساء scrollbar-gutter line-clamp وحدات إطار العرض الصغيرة والكبيرة والديناميكية مسارات الشبكة aspect-ratio الخصائص المنطقية
  1. ‫1 الأساسيات
    1. ما هو وضع التنسيق الذي يجب استخدامه؟
    2. مبادئ العمل
  2. ‫2 Flexbox
  3. ‫3 الشبكة والشبكة الفرعية
    1. مثال على الرمز: الشبكة والشبكة الفرعية
  4. ‫4 طلبات بحث عن الحاويات
    1. مثال على الرمز البرمجي: أسلوب طباعة مرن باستخدام وحدات طلبات البحث عن الحاويات
  5. ‫5 تراكبات أصلية، وتحديد موضع الارتساء، وسياقات التكديس
  6. ‫6 تتبُّع تجاوز السعة وثبات التنسيق
  7. 7 آليات إطار العرض وتوزيع المسارات
  8. ‫8 مسارات شبكة (المعروفة أيضًا باسم "البناء")

‫1 الأساسيات

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

‫1.1 أي وضع تخطيط يجب استخدامه؟

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

  1. هل هو صف أو عمود بسيط من العناصر؟ استخدِم نموذج flexbox، وهو نموذج أحادي الأبعاد يركّز على المحتوى ويوزّعه على محور واحد.
  2. هل يجب أن يتوافق عنصر متداخل مع مسارات شبكة العنصر الرئيسي؟ استخدِم الشبكة الفرعية، وهي شبكة ثنائية الأبعاد تعتمد على العلاقات وترث المسارات الرئيسية لكي تتمكّن العناصر الفرعية من المحاذاة مع العناصر الشقيقة.
  3. هل هي صفحة معقّدة أو بنية مكوّنات تحتوي على صفوف وأعمدة؟ استخدِم الشبكة: ثنائية الأبعاد، تعتمد على التنسيق أولاً، وتحدّد الهيكل ويملأ المحتوى الشبكة.
  4. هل المحتوى عبارة عن تدفق طويل من النثر يجب تقسيمه إلى أعمدة متوازنة؟ استخدِم الأعمدة المتعددة، مثل تدفق أحادي الأبعاد، ونمط الصحيفة.
  5. هل السلع ذات ارتفاعات مختلفة ويجب تعبئتها بإحكام؟ استخدِم grid مع grid-auto-flow: dense اليوم، واستخدِم ميزة "التجانب" (masonry) المضمّنة (المعروفة أيضًا باسم "مسارات الشبكة") فقط عندما يتم طرحها في إصدار Baseline المستهدَف (راجِع الفقرة 8).
  6. هل يجب أن يطفو عنصر فوق الصفحة ويبقى مرتبطًا مكانيًا بمشغّل، حتى عبر حدود DOM أو سياقات التجميع؟ استخدِم تحديد موضع الارتساء: anchor-name على المشغّل وposition-anchor على النافذة المرافقة (راجِع الفقرة 5).

‫1.2 مبادئ العمل

  • استخدِم الخصائص المنطقية (inline-size وblock-size وmargin-inline وpadding-block وinset-inline-start) لأبعاد التنسيق والتباعد. يمكنك الاطّلاع على CSS: Modern Architecture للحصول على تغطية كاملة.
  • استخدِم نموذج التفكير "المحتوى أولاً" مقابل "التنسيق أولاً": استخدِم flexbox عندما يحدّد المحتوى التدفق، واستخدِم الشبكة عندما تحدّد الهيكل أولاً.
  • استخدِم اختصارات place-* (place-content وplace-items وplace-self) للمحاذاة على كلا المحورَين في بيان واحد.
  • استخدِم الحجم الجوهري (min-content وmax-content وfit-content()) والمسارات المرنة (fr وminmax()) قبل استخدام width/height الثابتة، ما يقلّل من الاستعلامات عن الوسائط ويوفّر تنسيقات أكثر مرونة.
  • لا تستخدم overflow: hidden لإخفاء مشاكل التنسيق، بل أصلِحها في المصدر. على سبيل المثال، تستخدم بعض العناصر المستبدَلة، مثل <canvas> و<img> و<svg> و<video> و<iframe>، السمة display: inline تلقائيًا، ما قد يضيف فجوة في بعض التنسيقات. بدلاً من اقتصاص الفجوة باستخدام overflow، يمكنك إزالتها من خلال تطبيق قيمة block display-outside (مثل display: block أو grid أو flex وما إلى ذلك).
  • استخدِم aspect-ratio لحجز مساحة للوسائط ومنع تغيّرات التصميم قبل تحميل مواد العرض.
.sidebar       { inline-size: max-content; }    /* Size to longest unbreakable token. */
.main-content  { inline-size: fit-content; }    /* Grow to available space, no further. */
.media         { aspect-ratio: 16 / 9; inline-size: 100%; block-size: auto; }
body.centered  { display: grid; place-content: center; min-block-size: 100dvb; }

للاطّلاع على calc-size() وتحديد الحجم الجوهري استنادًا إلى القيود، يُرجى مراجعة الحساب باستخدام الأحجام الجوهرية.

‫2 Flexbox

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

ما يجب فعله:

  • أنشئ سياقًا باستخدام display: flex واضبط المحور الرئيسي باستخدام flex-direction (row تلقائيًا).
  • استخدِم flex-wrap: wrap كلما كان هناك احتمال لتجاوز السعة، لأنّ nowrap بدون overflow: auto/hidden سيؤدي إلى تجاوز السعة في إطارات العرض الضيقة.
  • يمكنك استخدام السمة flex-wrap: balance بعد flex-wrap: wrap في الصفوف الملتفّة للعناصر المدمجة (مثل مجموعات الكلمات المفتاحية أو أزرار الفلاتر أو مجموعات الأزرار أو روابط التنقّل) لتوزيع العناصر بالتساوي على الأسطر ومنع ظهور عنصر واحد معزول في الصف الأخير. في حال عدم توفّر هذه السمة في المتصفّحات، يتم استخدام السمة wrap.
  • استخدِم السمة المختصرة flex <grow> <shrink> <basis> (مثل flex: 1 1 250px) على العناصر بدلاً من ضبط flex-grow/flex-shrink/flex-basis بشكل فردي.
  • استخدِم gap (أو row-gap/column-gap) لإضافة مسافة بين العناصر بدلاً من الهوامش الفرعية.
  • يجب إضافة بادئة للمحاذاة الموضعية باستخدام safe (مثلاً، align-items: safe center) لكي لا يتم اقتصاص المحتوى الذي يمكن التركيز عليه عندما تكون الحاوية أضيق من محتواها.
  • يمكنك دفع عنصر واحد إلى الطرف البعيد من المحور الرئيسي باستخدام margin-inline-start: auto (أو margin-block-start: auto)، وهو المخرج القياسي.
  • يمكنك إلغاء محاذاة المحور المتقاطع لكل عنصر باستخدام align-self.
  • استخدِم align-items لتوسيط جميع العناصر على المحور المتقاطع، واستخدِم margin: auto على عنصر واحد لتوسيطه على كلا المحورَين بشكل مستقل، واستخدِم align-content فقط عندما تلتف الحاوية وتتضمّن مساحة إضافية على مستوى الصفوف.
  • اضبط min-inline-size: 0 (أو min-width: 0) على عناصر flex التي تحتوي على محتوى طويل غير قابل للتقسيم (عناوين URL أو رموز برمجية أو سلاسل طويلة)، لأنّ عناصر flex لن تتقلّص تلقائيًا إلى حجم أصغر من حجم المحتوى، ما يؤدي إلى تجاوُز السعة.

لا يُسمح بما يلي:

  • لا تستخدِم السمة justify-self مع عناصر flex، لأنّها تعمل فقط مع تنسيقات grid وblock وabsolutely-positioned. استخدِم الهوامش التلقائية بدلاً من ذلك.
  • لا تستخدِم order أو flex-direction: *-reverse لإعادة ترتيب المحتوى التفاعلي. فهي تغيّر الترتيب المرئي فقط، ويظل ترتيب DOM هو الذي يحدّد التركيز التسلسلي، لذا لن يتطابق تدفق علامات التبويب في لوحة المفاتيح مع ما يراه المستخدم.
  • يجب عدم الخلط بين space-around (نصف الفجوة في الأطراف) وspace-evenly (فجوات متساوية قبل وبين وبعد).
  • لا تنسَ قلب المحور: عندما تكون قيمة السمة flex-direction: column، تتم محاذاة السمة justify-content على محور الكتلة وتتم محاذاة السمة align-items على المحور المضمّن، أي عكس الوضع التلقائي.
  • لا تضبط حجم كل من الحاوية والعناصر الفرعية لملء بعضها البعض، لأنّ ذلك يؤدي عادةً إلى تجاوز السعة وظهور نتائج غير متوقعة. حدِّد حجمًا معيّنًا لأحد الجانبَين.
  • لا تضبط كلاً من flex-basis وwidth/inline-size على العنصر نفسه، لأنّ flex-basis له الأولوية في سياق flex ويتم تجاهل width. استخدِم flex-basis (أو الاختصار flex) كمصدر وحيد للحقيقة لتحديد حجم عناصر flex.
.card-grid        { display: flex; flex-flow: row wrap; gap: 1rem; }
.card-item        { flex: 1 1 250px; }                  /* grow, shrink, basis */
.card-item-action { margin-inline-start: auto; }        /* Push to main-axis end. */
.toolbar          { display: flex; align-items: safe center; }
.tag-list         { display: flex; flex-wrap: wrap; flex-wrap: balance; gap: 0.5rem; }

‫3 الشبكة والشبكة الفرعية

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

اختيار ميزات الشبكة:

  • هل تعرف بالضبط عدد الأعمدة التي تحتاجها؟
    • نعم: استخدام الأغاني التي تتضمّن محتوًى فاضحًا (grid-template-columns: 200px 1fr وrepeat(3, 1fr) وغير ذلك)
    • هل تحتاج الأعمدة المختلفة إلى أحجام مختلفة (الشريط الجانبي + الرئيسي، والعنوان يمتد على الكل)؟ ← استخدام grid-template-areas للمناطق المُعنوَنة والقابلة للقراءة
    • هل جميع الأعمدة موحّدة أم تم تحديد موضعها حسب رقم السطر فقط؟ ← استخدام repeat(N, ...) أو الخطوط المُعنوَنة
    • لا (متجاوب، عدد العناصر غير معروف): استخدِم repeat(auto-fit, minmax(min, 1fr))
    • هل يجب تمديد العناصر في الصف الأخير لملء المساحة المتبقية؟ ← auto-fit
    • هل يجب أن تحتفظ مسارات الصف الأخير الفارغة بالحد الأدنى لحجمها (مع الحفاظ على خانات الأعمدة الفارغة)؟ ← auto-fill
  • هل تحتاج إلى وضع عنصر في موقع معين؟
    • نعم: استخدِم grid-column: <start> / <end> أو grid-area: <name>
    • لا (يمتد فقط عبر قنوات متعددة، ولا يهم موضع المسار) — استخدِم grid-column: span <n>
  • هل يجب أن تكتسب العناصر الثانوية أحجام مسارات الشبكة الرئيسية (محاذاة الحواف غير المنتظمة على مستوى العناصر الشقيقة)؟
    • نعم: استخدام الشبكة الفرعية على المحور المتأثر
    • هل عدد الأطفال لكل خلية متغير؟ ← الشبكة الفرعية محور واحد فقط، استخدِم grid-auto-rows/grid-auto-columns للمحور الآخر
    • هل تم إصلاح عدد الأطفال؟ → الشبكة الفرعية على كلا المحورين جيدة
    • لا: شبكة عادية، لا حاجة إلى شبكة فرعية

ما يجب فعله:

  • تحديد سياق باستخدام display: grid
  • استخدِم grid-template-areas للتخطيطات المعقّدة على مستوى الصفحة، فأسماء المناطق توثّق نفسها ويمكن محاذاة التعريف في صفوف وأعمدة لتسهيل القراءة بنظرة سريعة.
  • استخدِم repeat(auto-fit, minmax(200px, 1fr)) لشبكات البطاقات المتجاوبة التي تمدّد المسارات الممتلئة لملء الصف، أو auto-fill للحفاظ على المسارات الفارغة المتكررة بأصغر حجم لها.
  • استخدِم fr لتوزيع المسارات بشكل نسبي وminmax(min, max) للمسارات المرنة والمحدودة.
  • يمكنك تحديد موضع العناصر باستخدام السمة grid-column: span <n> لتحديد حجمها على مستوى المسارات، أو السمة grid-column: <start> / <end> لوضعها في أسطر معيّنة، أو السمة grid-area: <name> للمناطق المُسمّاة.
  • استخدِم الشبكة الفرعية (grid-template-columns: subgrid أو grid-template-rows: subgrid) لحلّ مشكلة "الحواف غير المستوية" في قوائم البطاقات، إذ تتم محاذاة العناصر الداخلية مثل العناوين والبيانات الوصفية وعبارات الحث على اتخاذ إجراء مع العناصر المجاورة.
  • يمكنك إقران تعريف الشبكة الفرعية بتعريف grid-template-rows/-columns صريح سابق كحلّ بديل متسلسل للمتصفّحات القديمة.

لا يُسمح بما يلي:

  • لا تتوقّع أن يأتي حجم المسار auto-fit/auto-fill من محتوى العنصر، بل يأتي من وسيطة الحجم repeat().
  • لا تستخدِم grid-auto-flow: dense في المحتوى التفاعلي. فهي تجمع العناصر بكفاءة ولكنّها تعيد ترتيبها بشكل مرئي، ما يؤدي إلى تعطيل تدفق علامات التبويب في لوحة المفاتيح بترتيب DOM.
  • لا تطبِّق الشبكة الفرعية على كلا المحورَين عندما يكون عدد العناصر الفرعية متغيرًا. تظهر العناصر الإضافية في المسار الأخير، لذا يُرجى استخدام grid-auto-rows/grid-auto-columns للمحور الضمني بدلاً من ذلك.
  • يجب عدم الخلط بين justify-items/align-items (محاذاة محتوى العنصر ضمن مساره) وjustify-content/align-content (محاذاة مسارات الشبكة ضمن الحاوية). ولن يؤدي استخدام السمة الخاطئة إلى أي تأثير.
  • لا تستخدِم repeat(auto-fit/auto-fill, ...) بدون inline-size محدّد في الحاوية، فداخل display: inline-grid أو عنصر مرن غير محدّد الحجم، لا تحتوي الحاوية على عرض لتقسيمه، ما يجعل عدد المسارات غير قابل للتوقّع.

‫3.1 مثال على الرمز: grid وsubgrid

إطار الصفحة: يحتوي "<main class="page-layout">" على "<header>" و"<aside>" و"<section class="card-grid">" مع <div class="card"> عنصر فرعي و"<footer>".

/* Align grid-template-areas in rows and columns for readability. */
.page-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
  gap: 1.5rem;
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
footer  { grid-area: footer; }

.card-grid {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-template-rows: auto 1fr; /* title block, body block */
  gap: 1rem;
}

.card {
  grid-row: span 2;
  display: grid;
  /* Same-cascade fallback: ignored when subgrid is supported. */
  grid-template-rows: auto 1fr;
  grid-template-rows: subgrid;
}

‫4 طلبات بحث الحاوية

يمكنك الاستعلام عن حجم (أو النمط المحسوب) لحاوية أصل بدلاً من إطار العرض. النموذج الذهني: طلبات البحث عن الحاويات = سياق المكوّن، الاستعلام عن الوسائط = تنسيق الصفحة العام وإعدادات المستخدم المفضّلة (prefers-color-scheme، prefers-reduced-motion).

ما يجب فعله:

  • يمكنك إنشاء سياق احتواء باستخدام container-type: inline-size (طلبات البحث عن العرض فقط) أو container-type: size (كلا المحورَين) على برنامج تضمين قبل أن يتم طلب البحث عن العناصر التابعة له.
  • يجب تسمية الحاويات باستخدام container-name (أو الاختصار container: container: card / inline-size) عندما يكون هناك احتمال لتداخل السياقات المتداخلة.
  • تضمين وحدات طلب البحث عن الحاوية في حساب نوع السائل والتباعد: cqi/cqb (سطر/كتلة منطقية)، cqw/cqh (مادي)، cqmin/cqmax.
  • امنح الحاوية قيمة block-size محدّدة عند استخدام container-type: size، وإلا ستنهار العناصر التابعة لأنّ احتواء الحجم يفرض على الحاوية تجاهل محتواها.

لا يُسمح بما يلي:

  • لا تستخدِم block-size كقيمة container-type لأنّها غير صالحة. استخدِم size لكلا المحورَين.
  • لا تتوقّع أن يؤثّر الحجم الأساسي للعناصر الفرعية في الحاوية بعد تحديد container-type. يتم احتساب الحاوية كما لو لم تكن تحتوي على عناصر فرعية بعد تفعيل الاحتواء.
  • لا تعتمِد على وحدات استعلامات الحاوية داخل العناصر التابعة لعنصر رئيسي غير مؤهَّل، لأنّها تعود إلى إطار العرض الصغير (svw/svh).

‫4.1 مثال على الرمز البرمجي: أسلوب الطباعة المرن باستخدام وحدات طلبات الحاوية

.card-wrapper {
  container: card / inline-size; /* shorthand for container-name / container-type */
}

@container card (inline-size > 400px) {
  .content {
    display: flex;
    gap: 2rem;
  }
}

.title {
  /* Fluid type bound to the container width, not the viewport. */
  font-size: clamp(1rem, 4cqi, 2rem);
}

للاطّلاع على أنماط التصميم المتجاوب المستندة إلى المكوّنات، يُرجى مراجعة التصميم المستند إلى الحجم والتغيير المرن للحجم.

‫5 تراكبات أصلية ومواضع تثبيت وسياقات تكديس

حالات استخدام كل عنصر أساسي في التراكب:

  • استخدِم popover لواجهة المستخدم المؤقتة وغير المشروطة (النوافذ المنبثقة، والإشعارات المؤقتة، وتلميحات الشاشة)، فهي تظهر في الطبقة العليا، ولا حاجة إلى إدارة z-index.
  • استخدِم <dialog> مع .showModal() للتفاعلات المشروطة التي تتطلّب حصر التركيز وخلفية خاملة.
  • لا تدمج popover و.showModal() في العنصر نفسه، فهما حالتا وقت تشغيل يستبعد كل منهما الآخر.

تحديد موضع الارتساء (التنسيق المكاني للعناصر المضافة):

  • استخدِم position-area (أو anchor() في الأجزاء المضمّنة) وanchor-size() لتحديد موضع وحجم النافذة المرافقة بالنسبة إلى مشغّلها.
  • استخدِم position-try-fallbacks: flip-block (أو flip-inline) للسماح للمتصفّح بإعادة تحديد الموضع عندما يتجاوز المحتوى المركّب إطار العرض.
  • لا تخلط بين الكلمات الرئيسية المادية والمنطقية في قيمة position-area واحدة، بل اختَر نظام إحداثيات واحدًا.
  • يمكنك رصد الميزة باستخدام @supports (anchor-name: --x) وتوفير موضع مطلق كحلّ بديل.

للاطّلاع على تفاصيل التنفيذ الكاملة واستراتيجيات polyfill ومرجع قيمة popover، يُرجى الاطّلاع على عنصر التحكّم في مربّع الحوار التعريفي والعنصر المنبثق وتلميحات الشاشة التي تراعي الموضع. للاطّلاع على كيفية تطبيق ميزة "تحديد موضع الارتساء" على القوائم المنسدلة والنوافذ المنبثقة ومؤشرات علامات التبويب، يُرجى مراجعة القوائم المنسدلة المتوافقة مع إطار العرض والخط السفلي لعلامة التبويب في ميزة "تحديد موضع الارتساء".

‫6 تتبُّع العناصر الفائضة وثبات التنسيق

يمكنك إدارة متغيّرات التصميم وأشرطة التمرير والاقتصاص بشكل متوقّع.

ما يجب فعله:

  • استخدِم overflow: auto لكي تظهر أشرطة التمرير فقط عندما يتجاوز المحتوى المساحة المخصصة له.
  • استخدِم overflow: clip لاقتصاص المحتوى بدون إنشاء حاوية للتمرير، واختَر spillover مع overflow-clip-margin.
  • استخدِم scrollbar-gutter: stable لحجز مساحة لأشرطة التمرير ومنع متغيّرات التصميم عند زيادة المحتوى.
  • استخدِم overscroll-behavior: contain (أو none) في مناطق الانتقال المُدمَجة (مثل الأشرطة الجانبية والنوافذ المشروطة والقوائم) لمنع سلاسل الانتقال من الظهور في الصفحة، أو overscroll-behavior: chain في برامج تضمين الانتقال المتوسطة (مثل مسارات التمرير السريع للكشف) عندما يجب أن ينتقل الانتقال الزائد إلى أداة انتقال سابقة بدون تشغيل ارتداد محلي للشريط المطاطي.

  • استخدِم الثلاثي -webkit-line-clamp + display: -webkit-box + -webkit-box-orient: vertical للاقتطاع من أسطر متعددة، فعلى الرغم من البادئة، يتم تحديد هذا النمط بالكامل ولا يتم إيقافه نهائيًا. يجب الإعلان عن السمة المختصرة line-clamp بدون بادئة إلى جانبها، وستتجاهل المتصفّحات التي لا تتيحها هذه السمة بدون أي ضرر. لا يُسمح بما يلي:

  • لا تستخدِم overflow: scroll عندما يكون auto كافيًا، لأنّ scroll يفرض أشرطة التمرير حتى في حال عدم توفّر محتوى للتمرير.

  • لا تستخدِم السمة overflow: hidden إذا أردت فقط اقتصاص المحتوى، لأنّ السمة hidden تنشئ حاوية قابلة للتمرير آليًا.

.scrollable-list {
  max-block-size: 400px;
  overflow-y: auto;
  scrollbar-gutter: stable;       /* Reserve scrollbar space. */
  overscroll-behavior: contain;   /* No scroll chaining into the page. */
}

.snippet {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;                  /* Ignored where unsupported. */
  overflow: clip;
}

للاطّلاع على تفاصيل حول overflow: clip وoverflow-clip-margin، يُرجى مراجعة التحكّم في اقتصاص المحتوى الزائد. للحصول على معلومات حول نقل التمرير المتداخل باستخدام overscroll-behavior: chain في واجهة المستخدم التي تتيح التمرير السريع للكشف عن المحتوى، يُرجى الاطّلاع على التمرير السريع للكشف عن المحتوى. للاطّلاع على لون شريط التمرير وحجمه ومظهره، يُرجى مراجعة تخصيص لون شريط التمرير أو سُمكه والوضع الداكن وتكييف شريط التمرير مع الإعدادات المفضّلة للتباين العالي.

‫7 آليات العرض وتوزيع المسارات

  • استخدِم dvh/dvw لحاويات تنسيق الأجهزة الجوّالة التي يجب أن تأخذ في الاعتبار تغيير واجهة مستخدم المتصفّح (تصغير/توسيع شريط عناوين URL).
  • لا تستخدِم 100vw للتنسيق ذي العرض الكامل، لأنّه يتجاهل عرض شريط التمرير ويؤدي إلى تجاوز السعة أفقيًا. يُرجى استخدام 100% أو 100dvw أو 100svw بدلاً من ذلك.

للاطّلاع على نقطة الدخول إلى التصميم السريع الاستجابة (وحدات إطار العرض الديناميكية، وحجز مساحة للوسائط، والخطوط المرنة)، يُرجى مراجعة التصميم السريع الاستجابة.

‫8 مسارات شبكة (تُعرف أيضًا باسم التصميم المُتراص)

يتم تطوير المواصفات تحت اسم "مسارات الشبكة" (مثل display: grid-lanes)، بينما استخدمت النماذج التجريبية السابقة grid-template-rows: masonry.

ما يجب فعله:

  • استخدِم الشبكة مع السمة grid-auto-flow: dense لتجميع العناصر بشكل متقارب اليوم، مع العلم أنّ ترتيب DOM قد لا يتطابق مع الترتيب المرئي.
  • استخدِم ميزة "الأعمدة المتعددة" (columns: 3; column-gap: 1rem) لإنشاء تدفق يشبه البناء ويحتوي على الكثير من المحتوى عندما تكون العناصر عبارة عن أجزاء من المستندات بدلاً من بطاقات متساوية الوزن.
  • استخدِم grid-template-rows: masonry كتحسين تدريجي فقط، واكتشِف الميزات باستخدام @supports.

لا يُسمح بما يلي:

  • لا تشحن grid-template-rows: masonry كمتطلب صارم حتى يلحق هدفك الأساسي.
.gallery       { columns: 3 200px; column-gap: 1rem; }
.gallery > *   { break-inside: avoid; margin-block-end: 1rem; }

@supports (grid-template-rows: masonry) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: masonry;
    gap: 1rem;
    columns: unset;
  }
}