CSS للتخطيط: Flexbox وGrid والتجاوب
درس 4 من 8
4CSS للتخطيط: Flexbox وGrid والتجاوب
الصورة الكبيرةبلا CSS للتخطيط، كل عنصر ينزل تحت الذي قبله كعمود طويل. هذا الدرس يعطيك أداتين تكفيان لـ 95% من تخطيطات الويب، Flexbox وGrid، ثم يجعل صفحتك تتأقلم وحدها من جوال صغير إلى شاشة عريضة.
ماذا تشاهد في الرسم: من عمود صناديق إلى صفحة كاملة: Flex يرصّ عناصر الشريط في صف، Grid يقسّم البطاقات لأعمدة، واستعلام الوسائط يغيّر التخطيط حين تتّسع الشاشة.
خارطة هذا الجزء
المفاهيم بالترتيب، اضغط أيًّا منها للقفز إليه:
طريقان إلى نفس الفكرة
تخيّل أنك ترتّب كتبًا. Flexbox رفّ واحد: تصفّ الكتب جنبًا إلى جنب، تقرّر هل تبدأ من اليمين أو تتوزّع بمسافات متساوية، وإن امتلأ الرفّ تنتقل لرفّ تحته. Grid مكتبة بخانات: تقسّم الجدار لصفوف وأعمدة وتضع كل كتاب في خانته. والتجاوب أن المكتبة تعيد ترتيب نفسها: في غرفة ضيقة (جوال) عمود واحد، وفي غرفة واسعة (حاسوب) ثلاثة.
Flex تخطيط بُعد واحد: محور رئيسي (flex-direction) يحكمه justify-content، ومحور عرضي يحكمه align-items، وflex: 1 يوزّع المساحة الزائدة (flex-grow/flex-shrink/flex-basis)، وflex-wrap يكسر الصف. Grid بُعدان: مسارات grid-template-columns بوحدة fr وminmax() وrepeat(auto-fit, ...) لشبكات تتجاوب بلا استعلامات، وgrid-template-areas لتخطيط مسمّى. التجاوب: meta viewport ثم الجوال أولًا مع @media (min-width)، وclamp() لأحجام سائلة، واستعلامات الحاوية @container لمكوّنات تتجاوب مع حاويتها لا الشاشة. الخصائص المخصّصة (--name) موروثة وتُقرأ بـ var() وتتغيّر داخل prefers-color-scheme. الخصائص المنطقية (inline/block) تتبع writing-mode وdir. وtransition يحرّك الخصائص القابلة للتحريك، مع احترام prefers-reduced-motion.
قبل أن تبدأ
🖌️CSS من الصفر
تعرف المحدّدات والصندوق والأولوية.
🧱HTML الدلالي
تكتب صفحة بـ header وnav وmain.
الفكرة الجوهرية
1Flexbox: صف واحد مرتّب
اكتب display: flex على الأب، فيصفّ أبناءه المباشرين في صف. ثم ثلاث خصائص تكفيك أغلب الوقت: gap المسافة بين الأبناء، وjustify-content توزيعهم على طول الصف (space-between يدفع الأول للبداية والأخير للنهاية)، وalign-items محاذاتهم عموديًا (center يوسّطهم). وأشهر حيلة في CSS: توسيط أي شيء في منتصف صندوق بسطرين.
شريط تنقّل وتوسيط بـ Flex
غيّر justify-content في .nav إلى center، ثم إلى flex-start. ثم احذف display: flex من .nav ولاحظ كيف ينهار الشريط لعمود.
لاحظ أن «البداية» في صفحة عربية هي اليمين: Flex يحترم اتجاه الصفحة تلقائيًا. وflex-direction: column يجعل المحور عموديًا، وflex-wrap: wrap يسمح بنزول العناصر لسطر جديد حين يضيق المكان، وflex: 1 على ابن يجعله يأخذ كل المساحة الباقية (مثل خانة بحث تمتد).
2Grid: شبكة من صفوف وأعمدة
display: grid مع grid-template-columns تقسّم الأب لأعمدة. وحدة fr تعني «حصّة من المساحة الباقية»: 1fr 2fr عمودان الثاني ضعف الأول. والسطر السحري repeat(auto-fit, minmax(160px, 1fr)) يعني: «ضع أكبر عدد أعمدة بعرض 160 على الأقل، ووزّع الباقي بالتساوي»، فتتجاوب الشبكة وحدها بلا أي استعلام.
شبكة قائمة تتجاوب وحدها
اسحب الزاوية السفلية للمعاينة أو صغّر نافذة المتصفح: تتغيّر الأعمدة وحدها. ثم غيّر 140px إلى 250px.
ولتخطيط صفحة كاملة، سمِّ المناطق بـ grid-template-areas وضع كل عنصر في منطقته بـ grid-area. الرسم يكاد يكون الكود نفسه:
.page {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-areas:
"head head"
"side main"
"foot foot";
gap: 16px;
}
header { grid-area: head; }
aside { grid-area: side; }
main { grid-area: main; }
footer { grid-area: foot; }3متى Flex ومتى Grid؟
سؤال واحد يحسمها: هل تتحكّم في بُعد واحد أم بُعدين؟ صف أزرار، شريط تنقّل، عناصر بطاقة فوق بعض، توسيط: Flex. شبكة منتجات، معرض صور، تخطيط صفحة بأعمدة وصفوف: Grid. وفي الواقع تجمعهما: Grid للصفحة والشبكة، وFlex داخل كل بطاقة.
Grid للشبكة وFlex داخل البطاقة
لاحظ أن الأزرار الثلاثة على نفس الخط رغم اختلاف طول الأسماء. احذف سطر margin-block-start: auto لترى الفرق.
4التصميم المتجاوب: الجوال أولًا
أكثر من نصف زيارات الويب من الجوال. الجوال أولًا يعني أن تكتب CSS للشاشة الصغيرة كأساس، ثم تضيف تعديلات للشاشات الأكبر داخل @media (min-width: 768px) { ... }. لا تنسَ سطر <meta name="viewport" content="width=device-width, initial-scale=1"> في الرأس، وإلا يعرض الجوال صفحتك مصغّرة كأنها حاسوب.
صفحة تتحوّل من عمود إلى عمودين
صغّر نافذة متصفحك حتى تصير المعاينة ضيقة: يختفي العمود الجانبي وينزل تحت. وclamp() يكبّر العنوان ويصغّره بسلاسة بين حدّين.
5المتغيرات والوضع الليلي
المتغير في CSS اسم يبدأ بشرطتين --brand تعرّفه مرة (عادة على :root، أي الصفحة كلها) وتقرؤه بـ var(--brand) في أي مكان. غيّر قيمته في مكان واحد فيتغيّر الموقع كله. ومع @media (prefers-color-scheme: dark) تغيّر المتغيرات حين يكون جهاز المستخدم على الوضع الليلي، فتحصل على وضع ليلي كامل بأسطر قليلة.
وضع ليلي من أربعة متغيرات
اضغط الزر لتبديل الوضع. الزر يستخدم سطر JavaScript واحدًا ستفهمه في درس DOM. غيّر --brand في الوضع النهاري لأي لون آخر.
6الاتجاه: صفحة واحدة للعربي والإنجليزي
margin-left يعني «يسار» دائمًا، وفي العربية تريد غالبًا «بداية السطر» وهي اليمين. الخصائص المنطقية تحلّ هذا: inline هو اتجاه السطر وblock اتجاه الأسطر، وstart/end بدايته ونهايته. فـ margin-inline-start هامش من اليمين في العربي ومن اليسار في الإنجليزي، تلقائيًا حسب dir، بلا ملف CSS ثانٍ.
نفس القاعدة في الاتجاهين
لاحظ أن .note تعمل صحيحة في الاتجاهين، و.old صحيحة في الإنجليزي فقط.
الجدول المختصر: left/right تصير inline-start/inline-end، وtop/bottom تصير block-start/block-end، وtext-align: left تصير text-align: start. ومنصة درب نفسها مكتوبة بهذه الطريقة لتعمل بالعربي والإنجليزي.
7الحالات والانتقالات: صفحة تشعر بها حيّة
الزر الجيد يتغيّر حين تمرّ عليه الفأرة (:hover)، وحين يُضغط (:active)، وحين يصله التركيز بلوحة المفاتيح (:focus-visible). وtransition يجعل التغيير ناعمًا بدل القفز: تحدّد أي خاصية تتحرّك وفي كم من الوقت. واحترم من يفضّل حركة أقل بـ prefers-reduced-motion.
زر بحالات وانتقال ناعم
غيّر .15s إلى 1s لترى الحركة ببطء.
outline: none لأنه «غير جميل». من يستخدم لوحة المفاتيح يضيع ولا يعرف أين هو. إن أردت تغييره، صمّم بديلًا واضحًا بـ :focus-visible لا أن تحذفه.مثال محلول
المشروع: صفحة مقهى كاملة متجاوبة. الهيكل الدلالي من درس HTML، الشريط بـ Flex، القائمة بـ Grid وauto-fit، البطاقات Flex عمودي بزر في الأسفل، المتغيرات للألوان، والخصائص المنطقية للاتجاه. عدّل فيها بحرية ثم انسخها لملفك:
صفحة المقهى كاملة
غيّر --brand لتغيّر هوية المقهى كلها، وصغّر النافذة لترى البطاقات تنتقل لعمود واحد.
خرافة مقابل حقيقة
| الخرافة | الحقيقة |
|---|---|
| Grid أحدث فاستخدمه بدل Flex دائمًا. | كلاهما للأبد: Flex لبُعد واحد وGrid لبُعدين، وكثيرًا ما تجمعهما. |
| للعربية تحتاج ملف CSS منفصل. | الخصائص المنطقية وdir تكفي لأغلب الصفحة. |
| التجاوب يعني كتابة نسخة للجوال ونسخة للحاسوب. | صفحة واحدة بقواعد تتأقلم، وكثير منها (auto-fit وclamp) يتجاوب بلا أي استعلام. |
أين تقابله في العمل
🛒المتاجر الإلكترونية
شبكات المنتجات Grid، وبطاقة كل منتج Flex.
📱مواقع تعمل على كل جهاز
صفحة واحدة تخدم الجوال والتابلت والحاسوب.
🌐مواقع ثنائية اللغة
الخصائص المنطقية تقلب الصفحة بين العربي والإنجليزي.
اختبر فهمك
#buy و.btn يعطيان الزر لونين. من يفوز؟
الخصوصية تُحسب قبل ترتيب الظهور، وid أعلى من class.
تريد شبكة بطاقات تتغيّر أعمدتها حسب العرض بلا media query. ماذا تكتب؟
auto-fit مع minmax يضع أكبر عدد أعمدة يتّسع لها العرض.
أي خاصية تبقى صحيحة في العربي والإنجليزي معًا؟
inline-start يعني «بداية السطر» في أي اتجاه كتابة.
تريد توسيط عنصر أفقيًا وعموديًا داخل صندوق. أسرع طريقة؟
Flex على الأب يوسّط الابن على المحورين بسطرين.
في «الجوال أولًا»، ماذا يكون داخل @media؟
الأساس للشاشة الصغيرة، والاستعلام يضيف ما يتغيّر حين تتّسع.
بطاقات مراجعة سريعة
تحقق من فهمك
متى Flex ومتى Grid؟
Flex لعناصر في صف أو عمود واحد يتوزّع حسب المحتوى، وGrid حين تتحكّم بالصفوف والأعمدة معًا.
لماذا نحتاج meta viewport؟
بدونه يعرض الجوال الصفحة كأنها شاشة حاسوب عرضها 980 بكسل ثم يصغّرها، فلا تعمل استعلامات الوسائط كما تتوقّع.
ما فائدة متغيرات CSS في الوضع الليلي؟
تغيّر قيم المتغيرات في مكان واحد داخل prefers-color-scheme، وكل العناصر تتبعها.
لماذا !important علامة خطر؟
يكسر التتالي الطبيعي ويجبرك على !important أقوى لاحقًا. الحل خفض الخصوصية.
مصادر هذا الدرس
مرتّبة بالنوع. ابدأ بالتوثيق الرسمي إذا تبي المرجع الدقيق، وبالمقال أو الفيديو إذا تبي الشرح أولًا.
أدوات2
خلّصت الدرس؟
سجّل الدخول ليُحفظ تقدّمك.