مختصر كتابي: The 3 Ways of Building Layouts
ما هو الـ Layout؟ وما طرق بنائه في CSS؟
الـ Layout هو عملية بناء الصفحة وتقسيمها، أي الطريقة التي نضع بها النصوص والصور وباقي العناصر مع بعضها، ونختار أماكنها وترتيبها في الصفحة. وفي CSS توجد ثلاث طرق مشهورة لبنائه: float وflexbox وCSS grid.
لماذا نحتاج إلى Layout؟
- كما عرفنا في الكورس السابق، العناصر تُوضع افتراضيًا بطريقة الـ normal flow: كل العناصر تأتي وراء بعضها.
- الاعتماد على هذه الطريقة وحدها يعطينا موقعًا غير عملي، مثل موقعنا الذي ظهر فيه الـ Side Bar في آخر الصفحة تمامًا، مع أن مكانه الصحيح في أعلى الصفحة بجوار المحتوى.
- هنا يأتي دورك كمطور واجهات (frontend developer): ترتّب عناصر الصفحة بشكل مناسب، فيصبح الموقع جميلًا وسهل الاستخدام ويقدّم تجربة مستخدم جيدة.
- إذن الـ Layout يضع الهيكل البصري (visual structure) للصفحة، ويحدد طريقة ترتيب العناصر داخلها.
نوعان من الـ Layout
- Page layout: طريقة ترتيب وتنظيم العناصر داخل الصفحة نفسها.
- Component layout: طريقة ترتيب وتنظيم العناصر داخل الـ component نفسه.
وتذكّر من كورس HTML أن الـ component مجموعة عناصر (elements) مع بعضها، نستطيع استخدامها أكثر من مرة في الموقع، مثل الـ main header والـ post header وجزء الـ related articles والـ footer.
ثلاث طرق لبناء الـ Layout في CSS
| الطريقة | متى نستخدمها؟ | ملاحظة |
|---|---|---|
| float layout | بعض الحالات التي يفيد فيها فعلًا | طريقة قديمة نوعًا ما، لكن مشاريع قديمة كثيرة مبنية بها وستقابلها |
| flexbox layout | الـ one dimensional layouts، مثل الـ component layout | طريقة جديدة حلّت محل الـ float |
| CSS grid | الـ two dimensional layouts، مثل الـ page layout | نرتّب بها الـ components في الصفحة رأسيًا وأفقيًا |
الـ flexbox والـ CSS grid غيّرا طريقة بناء الصفحات، وسهّلا أشياء كثيرة كانت تأخذ وقتًا ومجهودًا لتنفيذها بالـ float. ونبدأ في الفيديو القادم بأول طريقة: الـ float layout.
الخلاصة
- الـ Layout هو بناء الصفحة وتقسيمها وترتيب عناصرها.
- الـ normal flow وحده لا يكفي لبناء موقع عملي.
- يوجد نوعان: Page layout وComponent layout.
- الطرق الثلاث: float (قديمة)، وflexbox (بُعد واحد)، وCSS grid (بُعدان).
مصطلحات الدرس
| المصطلح | بالإنجليزية | المعنى |
|---|---|---|
| تخطيط الصفحة | Layout | بناء الصفحة وتقسيمها وترتيب عناصرها |
| التدفق الطبيعي | Normal flow | الوضع الافتراضي: العناصر وراء بعضها |
| الهيكل البصري | Visual structure | الشكل العام لتوزيع العناصر في الصفحة |
| المكوّن | Component | مجموعة عناصر نستخدمها أكثر من مرة في الموقع |
| بُعد واحد / بُعدان | One / Two dimensional | ترتيب في اتجاه واحد / ترتيب رأسي وأفقي معًا |