تصميم الويب سريع الاستجابة باستخدام CSS Grid وFlexbox

يعد تصميم الويب سريع الاستجابة وسيلة لتطوير مواقع الويب بحيث تعمل بشكل جيد على أنواع مختلفة من الأجهزة وأحجام الشاشات. بدلاً من الاضطرار إلى إنشاء إصدارات متعددة من الموقع لأجهزة مختلفة، يستخدم التصميم سريع الاستجابة شبكات وتخطيطات مرنة واستعلامات الوسائط والصور المرنة لتحسين تجربة المستخدم عبر جميع الأنظمة الأساسية.

لماذا يعد تصميم الويب سريع الاستجابة مهمًا؟

نظرًا لأن المزيد والمزيد من الأشخاص حول العالم يستخدمون الهواتف المحمولة والأجهزة اللوحية لتصفح الإنترنت، فإن امتلاك موقع ويب سريع الاستجابة لم يعد خيارًا بعد الآن - بل أصبح ضرورة. يتيح التصميم سريع الاستجابة إمكانية استخدام أكبر من خلال السماح للمستهلكين بالوصول إلى المحتوى بسلاسة، بغض النظر عن الجهاز الذي يستخدمونه. كما أنه يعمل على تحسين تجربة المستخدم من خلال التأكد من أن المحتوى متماسك بصريًا وسهل القراءة عبر الأجهزة، مما يمكن أن يقلل من الإحباط ويشجع التفاعل. علاوة على ذلك، فإن تصميم مواقع الويب سريع الاستجابة يواكب المستقبل، مما يسمح لها بالتكيف مع الأجهزة الجديدة دون الحاجة إلى إجراء عمليات إعادة تصميم واسعة النطاق.

اليوم، سنلقي نظرة على أساسيات تصميم الويب سريع الاستجابة ونركز بشكل خاص على تقنيتين قويتين من تقنيات CSS: Flexbox وCSS Grid. سنوضح كيف تتكيف هذه التخطيطات مع أحجام الشاشات المختلفة باستخدام موقع ويب بسيط يحتوي على مربعات وأرقام ملونة.

تاريخ موجز لتصميم الويب سريع الاستجابة

لقد تغير تصميم الويب سريع الاستجابة كثيرًا منذ الأيام الأولى للإنترنت. استعلامات الوسائط، التي تطبق الأنماط بناءً على خصائص الجهاز، مثل حجم الشاشة والدقة والاتجاه. تم تقديمها في أوائل العقد الأول من القرن الحادي والعشرين، وتم إطلاق Flexbox في عام 2012، وتم اعتماد CSS Grid في عام 2017. وقد أتاحت هذه الابتكارات للمصممين إنشاء تخطيطات قابلة للتكيف على عدد من الأجهزة المختلفة، مما يوفر تجربة أفضل للمستخدمين.

إنشاء تخطيطات سريعة الاستجابة باستخدام CSS Grid وFlexbox

الآن، دعونا نتحقق من بعض الأمثلة العملية التي تتيح لنا معرفة كيفية عمل Flexbox وCSS Grid.

تخطيط الشبكة المستجيبة: شبكة الألوان

سنقوم بإنشاء تخطيط بسيط باستخدام CSS Grid.

HTML لتخطيط الشبكة:

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

لغة البرمجة:

• ينشئ ترميز HTML حاوية سريعة الاستجابة (حاوية شبكة) ومربعات ملونة (عنصر شبكة) بأرقام وألوان خلفية مختلفة. تسمح علامة التعريف viewport للتخطيط بالتوسع على أجهزة مختلفة.

CSS لتخطيط الشبكة:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:

• يستخدم CSS لتخطيط الشبكة خصائص شبكة مختلفة لتكون أكثر استجابة. العرض: الشبكة؛ يقوم الإعلان بتعيين العنصر مع حاوية الشبكة الخاصة بالفئة كحاوية شبكية، حتى نتمكن من الاستفادة من كل ما تقدمه الشبكات. أعمدة قالب الشبكة: Repeat(auto-fit, minmax(100px, 1fr)); تحدد الخاصية كيفية تنظيم الأعمدة في الشبكة: فهي تقوم تلقائيًا بضبط عدد الأعمدة بناءً على المساحة المتوفرة، بحيث يكون لكل عمود عرض بحد أدنى 100 بكسل وبحد أقصى جزء واحد (1fr) من المساحة المتوفرة. يسمح هذا التصميم للشبكة بالتكيف مع أحجام الشاشات المختلفة، بحيث لا تفيض عناصر الشبكة أو تخلق فجوات قبيحة. الفجوة: 10 بكسل؛ تطبق الخاصية تباعدًا ثابتًا على عناصر الشبكة. وأخيرًا، نقوم بتكديس عناصر عناصر الشبكة مع العرض: flex; وتوسيط المحتوى الخاص بهم باستخدام justify-content: center؛ ومحاذاة العناصر: center. بهذه الطريقة، يكون كل عنصر منظمًا ومتوازنًا بشكل جيد.

مثال على تصميم الويب سريع الاستجابة: تخطيط الشبكة

يستخدم تخطيط الشبكة هذا:

1. عدد الأعمدة الديناميكية: تقوم الشبكة تلقائيًا بضبط عدد الأعمدة لتناسب عرض إطار العرض، مع أخذ العناصر بحد أدنى 100 بكسل.
2. حجم مرن: يتيح الضبط التلقائي للصناديق إعادة التدفق وإعادة الترتيب عند الحاجة، مما يمنح كل شيء مظهرًا أكثر تنظيمًا.
3. استعلامات الوسائط: على الرغم من عدم كتابتها هنا فعليًا، إلا أن الطريقة التي تتصرف بها عناصر الشبكة مع أحجام الشاشة المختلفة توضح مفهوم استعلامات الوسائط باستخدام خصائص الشبكة سريعة الاستجابة.

تخطيط Flexbox سريع الاستجابة: صف الألوان

بعد ذلك، دعونا نستخدم Flexbox لإنشاء صف بسيط من المربعات الملونة.

HTML لتخطيط Flexbox:

    
    
    
    


    

        
1
        
2
        
3
        
4
    

لغة البرمجة:

• على غرار مثال الشبكة، يقوم HTML هنا بإنشاء حاوية مرنة تحتوي على مربعات عناصر مرنة تعرض أرقامًا ملونة.

CSS لتخطيط Flexbox:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:
يستخدم CSS هنا خصائص Flexbox لإنشاء تخطيط سريع الاستجابة يتكيف مع أحجام الشاشات المختلفة. العرض: فليكس؛ في حاوية .flex توفر عناصرها الفرعية، أو (العناصر المرنة)، وظائف Flexbox. اللف المرن: اللف؛ تسمح الخاصية للعناصر بالتدفق على أسطر متعددة إذا تم تجاوز عرض الحاوية. محتوى التبرير: center; تقوم الخاصية بتوسيط العناصر المرنة على طول المحور الرئيسي، بحيث يكون هناك تخطيط متوازن بغض النظر عن عدد العناصر. الفجوة: 10 بكسل؛ تقدم الخاصية تباعدًا موحدًا بين العناصر، مما يحسن التنظيم العام. كل عنصر .flex هو أيضًا حاوية مرنة، وذلك باستخدام العرض: flex؛ للسماح بمزيد من المحاذاة لمحتواه الداخلي، والذي يتم توسيطه عموديًا وأفقيًا باستخدام justify-content: center؛ ومحاذاة العناصر: المركز؛. الأبعاد الثابتة للارتفاع: 100 بكسل؛ والعرض: 100 بكسل؛ توفير التوحيد، في حين أن الجمع بين هذه الخصائص يمنح التصميم مظهرًا رائعًا مع التكيف مع احتياجات الأجهزة المختلفة.

مثال على تصميم الويب سريع الاستجابة: تخطيط Flexbox

يوضح تخطيط flexbox هذا العديد من خصائص التصميم سريعة الاستجابة.

1. التغليف المرن : الغلاف المرن: الغلاف؛ الخاصية تجعل المربعات تنتقل إلى السطر التالي عندما لا يمكن احتواؤها في الصف، والتكيف مع عروض إطار العرض المختلفة.
2. العناصر المركزية: تظل العناصر في المنتصف بغض النظر عن حجم الشاشة، مما يؤدي إلى تحسين العرض التقديمي الإجمالي.
3. الأبعاد الثابتة: الصناديق لها حجم محدد، ولكنها تلتف ويتم إعادة ضبطها بناءً على المساحة المتوفرة، مما يسمح بتصميم سريع الاستجابة.

مقارنة شبكة CSS وFlexbox

عندما يتعلق الأمر بتصميم التخطيط في CSS، يعد كل من Grid وFlexbox خيارين رائعين، لكنهما يخدمان أغراضًا مختلفة. CSS Grid هو نظام تخطيط ثنائي الأبعاد يسمح لك بإنشاء هياكل شبكية معقدة تحتوي على صفوف وأعمدة، مما يجعله مثاليًا للتخطيطات التي تتطلب تحكمًا دقيقًا في كلا البعدين، كما هو الحال في تطبيقات الويب أو لوحات المعلومات. من ناحية أخرى، يعد Flexbox نموذج تخطيط أحادي البعد وهو الأفضل في توزيع المساحة على طول محور واحد - سواء أفقيًا أو رأسيًا - مما يجعله مثاليًا للتخطيطات الأبسط أو المكونات الأصغر مثل الأزرار أو قوائم التنقل. على الرغم من أنك قد تختار Grid للحصول على تخطيط شامل ومنظم حيث تحتاج العناصر إلى المحاذاة عبر كلا المحورين، فإن Flexbox سيكون خيارك الأمثل للحصول على تخطيط مرن وقابل للتكيف يحتاج إلى الاستجابة لحجم المحتوى. في النهاية، يجب أن يعتمد اختيارك على الاحتياجات المحددة لمشروعك؛ في كثير من الأحيان، باستخدام كلاهما معًا، بشكل تكميلي، يمكن أن يمنحك أفضل النتائج.

خاتمة

باستخدام CSS Grid وFlexbox، يمكنك إنشاء تخطيطات قابلة للتكيف تبدو رائعة على أي جهاز. توضح هذه الأمثلة مدى سهولة تنفيذ التصميمات الديناميكية.

الان حان دورك! قم بتجربة هذه التقنيات، وقم بتعديل الألوان وإعدادات التخطيط، ولاحظ مدى سهولة إنشاء تصميمات ممتعة وسريعة الاستجابة.
``
مصادر:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://kinsta.com/blog/response-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=بالنسبة لأسلوب التخطيط الرئيسي، يكون مفيدًا عند العمل مع الصفوف.