تصف التخطيطات الكبيرة التنظيم الأكبر على مستوى الصفحة لواجهتك.
قبل تطبيق أي تخطيط، عليك التأكّد من أنّ تدفق المحتوى منطقي. هذا الترتيب التلقائي في عمود واحد هو ما ستحصل عليه الشاشات الأصغر.
<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
لهذا التخطيط المحدّد، يمكنك أيضًا استخدام 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;
}
من خلال تطبيق بعض القواعد الذكية في flexbox أو الشبكة، من الممكن تصميم تخطيطات كبيرة ديناميكية باستخدام الحد الأدنى من CSS وبدون أي طلبات بحث عن الوسائط. يؤدي ذلك إلى تقليل الجهد المطلوب منك، لأنّك تجعل المتصفّح يُجري العمليات الحسابية بدلاً منك. للاطّلاع على بعض الأمثلة على تخطيطات CSS الحديثة التي تتسم بالسيولة بدون الحاجة إلى طلبات بحث عن الوسائط، انتقِل إلى 1linelayouts.com.
اختبِر معلوماتكَ
اختبِر معلوماتك حول التخطيطات الكبيرة.
ما هي الجملة التي تصف التخطيطات الكبيرة على أفضل وجه؟
هل تستخدم التخطيطات الكبيرة دائمًا طلبات بحث عن الوسائط للتكيّف مع أحجام الشاشات المختلفة؟
الآن بعد أن حصلت على بعض الأفكار حول التخطيطات الكبيرة على مستوى الصفحة، انتقِل إلى المكوّنات داخل الصفحة. هذا هو نطاق التخطيطات الصغيرة.