HTML وCSS / واجهات متكيفة / الدرس 8
مسارات Grid والتحجيم الداخلي
أنشئ علاقات ثنائية الأبعاد مع تمييز كسور المسارات وضغط المحتوى الأدنى والمواضع المقصودة.
في هذه الصفحة
أهداف الدرس
- المسارات تعبر عن علاقات مشتركة
- بناء عمودين مقيدين
- تجنب افتراق البصري والمنطقي
المسارات تعبر عن علاقات مشتركة
تعرف Grid صفوفا وأعمدة تصطف عبر البعدين. يصبح الأبناء المباشرون عناصر شبكة ويحتفظ داخلهم بتخطيطه. تأتي المسارات الصريحة من القالب وتنشأ الضمنية عند الحاجة. تقسم fr المساحة الباقية لا نسبة مطلقة من الحاوية، وتشغل gap مساحة منفصلة. ابدأ بالعلاقات كالبطاقات أو الشريط الجانبي واختر نموذجا موجزا؛ فلا تحتاج كل صفحة أسماء مناطق وإحداثيات يدوية.
أهمية الحدود الدنيا
قد تحتفظ 1fr بحد تلقائي يتأثر بالمحتوى، فتتجاوز مسارات كسرية العرض عند وجود رمز متصل أو وسائط عريضة. تسمح minmax(0, 1fr) بتقلص المسار لكن المحتوى يحتاج سياسة التفاف أو تجاوز. وقد تزيل min-inline-size: 0 قيد العنصر نفسه. هذه أدوات لقيود محددة لا وصفات تلصق عشوائيا. افحص المسار والعنصر والابن الزائد منفصلين.
بناء عمودين مقيدين
ينشئ المثال مسارين متساويين بحد صفري صريح، وتسمح البطاقات بالالتفاف وتحفظ ترتيب العناوين. تصبح الشبكة عمودا عند الضيق لأن تساوي الكسور لا يضمن عرضا صالحا. العتبة توضيحية وتحددها الحاجة الفعلية. لا تنشئ Grid دلالة جدول؛ فالمحتوى بطاقات موضوعية مستقلة. استخدم table إذا كانت العلاقات البيانية هي المقصودة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive tracks</title>
<style>
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .grid article { min-inline-size: 0; overflow-wrap: anywhere; } @media (max-width: 35rem) { .grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<main><h1>Two topics</h1><div class="grid"><article><h2>Markup</h2><p>Meaning and relationships.</p></article><article><h2>Layout</h2><p>averylongreferencewithoutspaces0123456789</p></article></div></main>
</body>
</html>
Two columns at wider sizes; one column below the example breakpoint.تتقاسم المسارات المساحة وتتكدس عند الضيق، ويعالج الالتفاف المحتوى الداخلي. النتيجة المتوقعة: عمودان عند الاتساع وواحد تحت العتبة.
استجابة التكرار للمساحة
يستخدم المثال repeat وauto-fit مع حد أدنى لا يتجاوز المتاح. تمنع min(100%, 14rem) فرض عمود أوسع من الحاوية. تطوي auto-fit المسارات الفارغة بعد التموضع، وقد تبقي auto-fill بنيتها؛ اختر السلوك المقصود. يعالج النمط مجموعات كثيرة دون عتبة لكل عدد أعمدة، لكنه يحتاج محتوى مقروءا واختبار الترجمات. لا يثبت العدد الآلي صلاحية كل بطاقة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auto-fit cards</title>
<style>
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } article { padding: 1rem; border: 1px solid; overflow-wrap: anywhere; }
</style>
</head>
<body>
<main><h1>Topic cards</h1><div class="cards"><article><h2>HTML</h2><p>Structure.</p></article><article><h2>CSS</h2><p>Presentation.</p></article><article><h2>Access</h2><p>Inclusive use.</p></article></div></main>
</body>
</html>
Cards occupy as many usable columns as the container permits.يتبع العدد المساحة ويسمح الحد المقيد بمسار واحد دون أربعة عشر rem. النتيجة المتوقعة: تشغل البطاقات عددا مناسبا من الأعمدة بحسب الحاوية.
تجنب افتراق البصري والمنطقي
قد ينقل التموضع عنصرا بصريا دون تغيير DOM، فيبقى ترتيب القراءة والمفاتيح مرتبطا بالمصدر. وقد تملأ dense الفجوات بعناصر متأخرة تظهر مبكرا، فلا تناسب تسلسلا ذا معنى. استخدمها فقط إذا لم يهم الترتيب واختبر التفاعل. تكشف تراكبات الأدوات المسارات الصريحة والضمنية. اختبر الزيادة والنقص والنص الطويل والتداخل. توضح الشبكة المصانة ملكية المسارات والقيود دون نسخ شاشة ثابتة.
الأخطاء الشائعة وإصلاحها
يتجاوز عمودا 1fr الشاشة
- لماذا يحدث؟
- تمنع الحدود الداخلية التقلص.
- كيف تصلحه؟
- افحص الحدود واربط التحجيم بالالتفاف.
- كيف تتجنب تكراره؟
- اختبر الرموز المتصلة والوسائط العريضة.
يظهر عمود إضافي
- لماذا يحدث؟
- أنشأ التموضع مسارا ضمنيا.
- كيف تصلحه؟
- افحص الخطوط وصحح الموضع.
- كيف تتجنب تكراره؟
- راجع الضمني بالتراكبات.
تخالف القراءة ترتيب البطاقات
- لماذا يحدث؟
- أعاد التموضع اليدوي أو dense العرض.
- كيف تصلحه؟
- وحد تسلسل المصدر والعرض.
- كيف تتجنب تكراره؟
- اختبر المفاتيح والقراءة الخطية.
اختبر فهمك
1. فسر لماذا لا تلف minmax(0, 1fr) كلمة كبيرة وحدها.
اعرض الحل المشروح
تغير حد المسار لا قواعد كسر النص. قد يتقلص المسار وتبقى الكلمة خارجه. أضف سياسة محتوى مناسبة مثل overflow-wrap وافحص قيود العناصر المتداخلة.
2. متى يجب أن يصبح تخطيط البطاقات جدولا؟
اعرض الحل المشروح
اختر table عندما تقارن المعلومات برؤوس صفوف وأعمدة كالميزات والأسعار. تصف Grid البطاقات بصريا ولا توفر العلاقات الدلالية. يقرر نوع البيانات البنية ثم يأتي العرض المتجاوب.
أهم ما تعلمته
- تقسم الكسور مساحة المسارات المتاحة.
- افحص حد المسار والمحتوى منفصلين.
- يجب أن يحترم التموضع الترتيب المنطقي.