تصف تنسيقات المخطّطات الكبيرة التنظيم الأكبر على مستوى الصفحة لواجهة المستخدم.
قبل تطبيق أي تنسيق، يجب التأكد من أن تدفق المحتوى منطقي. هذا الترتيب التلقائي لعمود واحد هو ما ستحصل عليه الشاشات الأصغر حجمًا.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
عند ترتيب هذه المكوّنات الفردية على مستوى الصفحة، أنت بصدد تصميم تنسيق إجمالي: عرض على مستوى عالٍ لصفحتك. باستخدام طلبات الاستعلام عن الوسائط، يمكنك تقديم قواعد في CSS تصف كيفية تعديل طريقة العرض هذه وفقًا لأحجام الشاشات المختلفة.
شبكة
شبكة CSS هي أداة ممتازة لتطبيق تنسيق على صفحتك. في المثال أعلاه، لنفترض أنّك تريد تخطيطًا من عمودَين بعد توفّر عرض شاشة كافٍ. لتطبيق تنسيق الأعمدة الثنائية هذا بعد أن يصبح المتصفّح واسعًا بما يكفي، استخدِم طلب بحث الوسائط لتحديد أنماط الشبكة فوق نقطة توقّف محدّدة.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
بالنسبة إلى هذا التنسيق المحدّد، يمكنك أيضًا استخدام صندوق مرن. ستظهر الأنماط على النحو التالي:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
ومع ذلك، يتطلّب إصدار Flexbox المزيد من CSS. يحتوي كل عمود على قاعدة منفصلة لوصف المساحة التي يجب أن يشغلها. في مثال الشبكة، يتم تضمين هذه المعلومات نفسها في قاعدة واحدة للعنصر الذي يحتوي على الشبكة.
هل تحتاج إلى طلب بحث عن الوسائط؟
قد لا تحتاج دائمًا إلى استخدام استعلام عن الوسائط. تعمل طلبات البحث عن الوسائط بشكل جيد عند تطبيق تغييرات على بعض العناصر، ولكن إذا كان من الضروري تعديل التنسيق كثيرًا، قد تصبح طلبات البحث عن الوسائط خارجة عن السيطرة بسبب الكثير من نقاط التوقف.
لنفترض أنّ لديك صفحة مليئة بمكونات البطاقات.
لا يزيد عرض البطاقات عن 15em، ويتعين عليك وضع أكبر عدد ممكن من البطاقات في سطر واحد.
يمكنك كتابة طلبات بحث الوسائط باستخدام نقاط توقّف 30em و45em و60em و
وما إلى ذلك، ولكنّ ذلك أمر شاقّ وصعب الحفاظ عليه.
بدلاً من ذلك، يمكنك تطبيق قواعد بحيث تشغل البطاقات نفسها المساحة المناسبة تلقائيًا.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
يمكنك الحصول على تخطيط مشابه باستخدام flexbox. في هذه الحالة، إذا لم يكن هناك بطاقات كافية لملء الصف الأخير، ستمتد البطاقات المتبقية لملء المساحة المتوفرة بدلاً من وضعها في الأعمدة. إذا كنت تريد ترتيب الصفوف والأعمدة، استخدِم الشبكة.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
من خلال تطبيق بعض القواعد الذكية في المربع المرن أو الشبكة، من الممكن تصميم تنسيقات ماكرو ديناميكية باستخدام الحد الأدنى من CSS وبدون أي استعلامات عن الوسائط. سيساعدك ذلك في تقليل الجهد المبذول، لأنّه سيتيح للمتصفح إجراء العمليات الحسابية بدلاً منك. للاطّلاع على بعض الأمثلة على تنسيقات CSS الحديثة التي تتسم بالسلاسة بدون الحاجة إلى طلبات بيانات الوسائط، يُرجى الاطّلاع على 1linelayouts.com.
التحقّق من فهمك
اختبر معلوماتك حول تنسيقات الماكرو.
أيّ جملة تصف تنسيقات العناصر الكبيرة بشكل أفضل؟
هل تستخدم تنسيقات الماكرو دائمًا طلبات البحث عن الوسائط للتكيّف مع أحجام الشاشات المختلفة؟
الآن بعد أن حصلت على بعض الأفكار لتخطيطات الماكرو على مستوى الصفحة، انتقل إلى العناصر داخل الصفحة. وهذا هو نطاق التنسيقات المصغّرة.