بوجا شارما هي من عشاق التكنولوجيا ومطورة ذات خبرة تعمل كقائدة تقنية في Cynoteck. مع خلفية قوية في منصات تطوير الويب مفتوحة المصدر، فهي متخصصة في تقديم مجموعة واسعة من المشاريع، بما في ذلك أنظمة CMS، ومواقع التجارة الإلكترونية، وتكامل API، ومواقع الويب الديناميكية، والمواقع المستندة إلى إطار عمل PHP. على مدار أكثر من 6 سنوات الماضية، قامت بوجا بذلك تفاصيل أكثر
نحن شريك Microsoft Gold مع وجودها في جميع أنحاء الولايات المتحدة والهند. نحن مزود خدمات تقنية معلومات ديناميكي ومهني يخدم المؤسسات والشركات الناشئة ، ويساعدها على مواجهة تحديات الاقتصاد العالمي. نحن نقدم خدمات في مجال استشارات إدارة علاقات العملاء وتنفيذها ، وتطوير التطبيقات ، وتطوير تطبيقات الهاتف المحمول ، وتطوير الويب ، والتطوير الخارجي.
CSS Grid و Flexbox هما أداتان قويتان جدًا لتخطيط CSS. في هذه المقالة سنقارنهم ونرى أيهم تختار ومتى تختار.
عندما ظهر Flexbox ، كان الكثير من المصممين متحمسين للغاية لأنه غير الطريقة التي كنا نقوم بها بالتخطيطات ثم جاء Grid ، فتح كلاهما الفرص لعمل تخطيطات جذابة مثيرة للاهتمام. كلاهما فليكس بوكس وشبكة تستند إلى مفهوم الصفوف والأعمدة. المشكلة الوحيدة التي كانت ولا تزال هي أن كلا خياري التخطيط يمكن أن يصبحا معقدين بسرعة كبيرة والعديد منهم ليسوا متأكدين من وقت استخدام flexbox ومتى يجب استخدام الشبكة. في هذه المدونة ، سوف نفهم أساسيات كلا التخطيطين وكيفية الاختيار بين كلا التخطيطين. دعونا نتعمق في هذا واحدًا تلو الآخر.
ما هي CSS GRID؟
• شبكة CSS التخطيط هو أيضًا ملف تخطيط المحتوى أولا يتيح لك تخطيط العناصر بمرونة لا تسمح لك فقط بتخطيطها في بعد واحد ولكن في بعدين على أساس الشبكة. تعد CSS Grid واحدة من أكثر أدوات التخطيط تأثيرًا وقوة. يسمح لك بإنشاء تخطيط ديناميكي وسريع الاستجابة ومعقد وتخطيط منظم برمز صغير.
CSS GRID هو نظام شبكي مرن وقابل للتكيف مع العديد من أحجام الشاشات. يمكن استخدامه لكل من التخطيطات سريعة الاستجابة والتخطيطات غير المستجيبة.
بدلاً من أن يكون مشفرًا بشكل ثابت ، فإنه يتبع مجموعة من الإرشادات التي تسمح للمصمم بتحديد العناصر التي تستجيب لنقاط التوقف ، وكيفية وضعها على الشبكة ، وغير ذلك الكثير.
تخطيط الشبكة
شبكة CSS مقابل FLEXBOX
إذن ، هذا رسم تخطيطي لتخطيط الشبكة حيث تصطف الأشياء في كلا الاتجاهين.
FLEXBOX عبارة عن حاوية يمكنها عرض المحتوى على أي جهاز ، بغض النظر عن حجم الشاشة.
يمكن استخدام FLEXBOX لإنشاء تخطيطات سريعة الاستجابة لموقع الويب الخاص بك والتي ستعمل عبر جميع الأجهزة.
يُعرف FLEXBOX أيضًا باسم نموذج الصندوق المرن وهو وضع تخطيط أحادي البعد لـ CSS3 يوفر طريقة سهلة ونظيفة لترتيب العناصر داخل الحاوية ، لذلك إذا كنت تستخدم CSS لفترة من الوقت ربما كنت تستخدم نموذج الكتلة القديم حيث تقوم بتعيين العروض سواء كانت نسبة مئوية أو عرضًا ثابتًا ثم تستخدم عوامات لترتيب العناصر على الصفحة ، مثلا - إذا كنت تريد ثلاثة مربعات متتالية ثم يتعين عليك توفير هوامشك وتحقيق النتيجة المرجوة ، لذا فقد اهتم flexbox بكل هذه الأشياء وهناك ميزات مثل: -
لا يطفو.
سريع الاستجابة وسهل الاستخدام للجوال.
وضع العناصر الفرعية أسهل بكثير.
لا تتقلب هوامش الحاوية المرنة مع هوامش محتوياتها.
يمكن ضبط ترتيب العناصر بسلاسة دون تحرير مصدر HTML.
مخطط فليكس بوكس
شبكة CSS مقابل FLEXBOX
وهنا رسم تخطيطي حول كيفية عمل الأشياء في flexbox حيث يتم إجراء الحسابات في كل صف واحدًا تلو الآخر دون أي اعتبار للصفوف الأخرى.
لذلك ، من هنا توصلنا إلى معرفة الفرق الرئيسي بين بعد واحد وبعدين هو أن Flexbox يمكن أن يعمل إما على صفوف أو أعمدة في وقت واحد بينما يمكن أن تعمل الشبكة ثنائية الأبعاد على كليهما في وقت واحد.
هناك اختلاف مهم آخر هو أن الشبكة تأخذ أساسًا في التخطيط بينما يأخذ Flexbox أساسًا في المحتوى. سيصبح هذا أكثر وضوحًا مع المثال التالي: -
لنفكر في حاوية بها تسعة عناصر حيث يحتوي العنصر الأول على بعض النص فيها.
كود html الشائع
أسلوب GRID
GRID مقابل FLEXBOX
هنا في تخطيط الشبكة المحتوى داخل الصندوق لا يمتد.
GRID مقابل FLEXBOX
نمط فليكس بوكس
GRID مقابل FLEXBOX
حيث ، هنا في تخطيط فليكس يمتد المحتوى داخل الصندوق.
الآن بعد فهم أساسيات كل من التصميم ، دعنا ننتقل إلى الهدف الرئيسي للمدونة لأن هذا هو الجزء الذي يتعطل فيه معظم المطورين.
الشبكة مقابل Flexbox
متى تستخدم Flex-Layout؟
أحد الأسباب الرئيسية لاستخدام Flex-Layout هو إنشاء تخطيطات سريعة الاستجابة.
متى يجب علي استخدامه؟ أحد الأسباب الرئيسية لاستخدام Flex-Layout هو إنشاء تخطيطات سريعة الاستجابة.
لا يتعامل Flexbox مع التخطيط للصفحة بأكملها ، فهو يتعامل مع التخطيط لحاوية معينة والعناصر التي تعتبر فرعية مباشرة لتلك الحاوية.
لديك تصميم معقد لتعمل معه وتريد صفحات ويب يمكن صيانتها.
ترغب في إضافة فجوات فوق عناصر الكتلة.
تحتاج إلى تداخل العناصر.
أنت بحاجة إلى تصميم أولًا.
متى تستخدم تخطيط الشبكة؟
تخطيط الشبكة هو تصميم صفحة ويب يحدد المحتوى في شبكة من الأعمدة ، حيث يمكن أن يكون لكل عمود أي عرض عشوائي.
يعد تخطيط الشبكة أحد أكثر أنواع تخطيطات تصميم الويب شيوعًا اليوم. يتم استخدامه على نطاق واسع لأنه يوفر فائدتين رئيسيتين: فهو يبسط عملية تقسيم المساحة إلى أعمدة وصفوف ، ويضمن محاذاة جميع العناصر إلى شبكة أساسية.
كان هذا النوع من التخطيط موجودًا منذ سنوات عديدة بالفعل ، ولكن الآن فقط بدأ بالفعل يكتسب شعبية بسبب مرونته. يستخدم العديد من المصممين الآن هذا النوع من التخطيط كنقطة انطلاق عند تصميم أي موقع ويب أو واجهة تطبيق.
تساعدك الشبكة على إنشاء التخطيط الخارجي للصفحة ، ويمكنك اعتباره هيكلًا للصفحة:
تحتاج إلى محاذاة العنصر.
أنت بحاجة إلى تصميم المحتوى أولاً.
يمكن للشبكة أن تفعل شيئًا واحدًا لا يستطيع Flexbox القيام به ، وهو أنه يمكن أن يتداخل مع العناصر عن قصد. لذلك ، في الحالة التي تريد فيها تداخل العناصر في هذه الحالة ، تحتاج إلى استخدام الشبكة.
هنا مثال حيث حصلنا على صور المحتوى وهناك جملة لكل واحدة بخلفية صغيرة.
لذلك ، يمكننا استخدام Grid لهذا ، يمكننا استخدام Flexbox إذا لم يكن هناك تداخل متضمن ولكن نظرًا لوجود تداخل ، لذا فأنت بحاجة إلى استخدام Grid.
CSS Grid و Flexbox هما أداتان قويتان جدًا لتخطيط CSS. في هذه المقالة سنقارنهم ونرى أيهم تختار ومتى تختار.
عندما ظهر Flexbox ، كان الكثير من المصممين متحمسين للغاية لأنه غير الطريقة التي كنا نقوم بها بالتخطيطات ثم جاء Grid ، فتح كلاهما الفرص لعمل تخطيطات جذابة مثيرة للاهتمام. كلاهما فليكس بوكس وشبكة تستند إلى مفهوم الصفوف والأعمدة. المشكلة الوحيدة التي كانت ولا تزال هي أن كلا خياري التخطيط يمكن أن يصبحا معقدين بسرعة كبيرة والعديد منهم ليسوا متأكدين من وقت استخدام flexbox ومتى يجب استخدام الشبكة. في هذه المدونة ، سوف نفهم أساسيات كلا التخطيطين وكيفية الاختيار بين كلا التخطيطين. دعونا نتعمق في هذا واحدًا تلو الآخر.
• شبكة CSS التخطيط هو أيضًا ملف تخطيط المحتوى أولا يتيح لك تخطيط العناصر بمرونة لا تسمح لك فقط بتخطيطها في بعد واحد ولكن في بعدين على أساس الشبكة. تعد CSS Grid واحدة من أكثر أدوات التخطيط تأثيرًا وقوة. يسمح لك بإنشاء تخطيط ديناميكي وسريع الاستجابة ومعقد وتخطيط منظم برمز صغير.
CSS GRID هو نظام شبكي مرن وقابل للتكيف مع العديد من أحجام الشاشات. يمكن استخدامه لكل من التخطيطات سريعة الاستجابة والتخطيطات غير المستجيبة.
بدلاً من أن يكون مشفرًا بشكل ثابت ، فإنه يتبع مجموعة من الإرشادات التي تسمح للمصمم بتحديد العناصر التي تستجيب لنقاط التوقف ، وكيفية وضعها على الشبكة ، وغير ذلك الكثير.
تخطيط الشبكة
شبكة CSS مقابل FLEXBOX
إذن ، هذا رسم تخطيطي لتخطيط الشبكة حيث تصطف الأشياء في كلا الاتجاهين.
FLEXBOX عبارة عن حاوية يمكنها عرض المحتوى على أي جهاز ، بغض النظر عن حجم الشاشة.
يمكن استخدام FLEXBOX لإنشاء تخطيطات سريعة الاستجابة لموقع الويب الخاص بك والتي ستعمل عبر جميع الأجهزة.
يُعرف FLEXBOX أيضًا باسم نموذج الصندوق المرن وهو وضع تخطيط أحادي البعد لـ CSS3 يوفر طريقة سهلة ونظيفة لترتيب العناصر داخل الحاوية ، لذلك إذا كنت تستخدم CSS لفترة من الوقت ربما كنت تستخدم نموذج الكتلة القديم حيث تقوم بتعيين العروض سواء كانت نسبة مئوية أو عرضًا ثابتًا ثم تستخدم عوامات لترتيب العناصر على الصفحة ، مثلا - إذا كنت تريد ثلاثة مربعات متتالية ثم يتعين عليك توفير هوامشك وتحقيق النتيجة المرجوة ، لذا فقد اهتم flexbox بكل هذه الأشياء وهناك ميزات مثل: -
لا يطفو.
سريع الاستجابة وسهل الاستخدام للجوال.
وضع العناصر الفرعية أسهل بكثير.
لا تتقلب هوامش الحاوية المرنة مع هوامش محتوياتها.
يمكن ضبط ترتيب العناصر بسلاسة دون تحرير مصدر HTML.
مخطط فليكس بوكس
شبكة CSS مقابل FLEXBOX
وهنا رسم تخطيطي حول كيفية عمل الأشياء في flexbox حيث يتم إجراء الحسابات في كل صف واحدًا تلو الآخر دون أي اعتبار للصفوف الأخرى.
لذلك ، من هنا توصلنا إلى معرفة الفرق الرئيسي بين بعد واحد وبعدين هو أن Flexbox يمكن أن يعمل إما على صفوف أو أعمدة في وقت واحد بينما يمكن أن تعمل الشبكة ثنائية الأبعاد على كليهما في وقت واحد.
هناك اختلاف مهم آخر هو أن الشبكة تأخذ أساسًا في التخطيط بينما يأخذ Flexbox أساسًا في المحتوى. سيصبح هذا أكثر وضوحًا مع المثال التالي: -
لنفكر في حاوية بها تسعة عناصر حيث يحتوي العنصر الأول على بعض النص فيها.
كود html الشائع
أسلوب GRID
GRID مقابل FLEXBOX
هنا في تخطيط الشبكة المحتوى داخل الصندوق لا يمتد.
GRID مقابل FLEXBOX
نمط فليكس بوكس
GRID مقابل FLEXBOX
حيث ، هنا في تخطيط فليكس يمتد المحتوى داخل الصندوق.
الآن بعد فهم أساسيات كل من التصميم ، دعنا ننتقل إلى الهدف الرئيسي للمدونة لأن هذا هو الجزء الذي يتعطل فيه معظم المطورين.
الشبكة مقابل Flexbox
متى تستخدم Flex-Layout؟
أحد الأسباب الرئيسية لاستخدام Flex-Layout هو إنشاء تخطيطات سريعة الاستجابة.
متى يجب علي استخدامه؟ أحد الأسباب الرئيسية لاستخدام Flex-Layout هو إنشاء تخطيطات سريعة الاستجابة.
لا يتعامل Flexbox مع التخطيط للصفحة بأكملها ، فهو يتعامل مع التخطيط لحاوية معينة والعناصر التي تعتبر فرعية مباشرة لتلك الحاوية.
لديك تصميم معقد لتعمل معه وتريد صفحات ويب يمكن صيانتها.
ترغب في إضافة فجوات فوق عناصر الكتلة.
تحتاج إلى تداخل العناصر.
أنت بحاجة إلى تصميم أولًا.
متى تستخدم تخطيط الشبكة؟
تخطيط الشبكة هو تصميم صفحة ويب يحدد المحتوى في شبكة من الأعمدة ، حيث يمكن أن يكون لكل عمود أي عرض عشوائي.
يعد تخطيط الشبكة أحد أكثر أنواع تخطيطات تصميم الويب شيوعًا اليوم. يتم استخدامه على نطاق واسع لأنه يوفر فائدتين رئيسيتين: فهو يبسط عملية تقسيم المساحة إلى أعمدة وصفوف ، ويضمن محاذاة جميع العناصر إلى شبكة أساسية.
كان هذا النوع من التخطيط موجودًا منذ سنوات عديدة بالفعل ، ولكن الآن فقط بدأ بالفعل يكتسب شعبية بسبب مرونته. يستخدم العديد من المصممين الآن هذا النوع من التخطيط كنقطة انطلاق عند تصميم أي موقع ويب أو واجهة تطبيق.
تساعدك الشبكة على إنشاء التخطيط الخارجي للصفحة ، ويمكنك اعتباره هيكلًا للصفحة:
تحتاج إلى محاذاة العنصر.
أنت بحاجة إلى تصميم المحتوى أولاً.
يمكن للشبكة أن تفعل شيئًا واحدًا لا يستطيع Flexbox القيام به ، وهو أنه يمكن أن يتداخل مع العناصر عن قصد. لذلك ، في الحالة التي تريد فيها تداخل العناصر في هذه الحالة ، تحتاج إلى استخدام الشبكة.
هنا مثال حيث حصلنا على صور المحتوى وهناك جملة لكل واحدة بخلفية صغيرة.
لذلك ، يمكننا استخدام Grid لهذا ، يمكننا استخدام Flexbox إذا لم يكن هناك تداخل متضمن ولكن نظرًا لوجود تداخل ، لذا فأنت بحاجة إلى استخدام Grid.
هل تبحث عن شركة تطوير ويب موثوقة؟ يمكّننا مطورو الويب ذوو المهارات العالية لدينا من تقديم خدمات تطوير الويب الموجهة نحو النتائج. اتصل بفريقنا لفهم كيف يمكننا مساعدتك في تحقيق أهداف عملك.
