يعد الفهم القوي لشبكة Flexbox و CSS Grid ضروريًا إذا كنت ترغب في إنشاء مواقع ويب مذهلة وسريعة الاستجابة.
إذا كنت تكتب CSS لأي فترة من الوقت ، فمن المحتمل أنك سمعت بهذه الشروط على الأقل. ربما تكون قد استخدمت أحدهما أو كليهما إلى حد ما. كلاهما أجزاء قوية من CSS ، مع حالات استخدام متشابهة ولكنها مختلفة تمامًا.
ما هو فليكس بوكس؟
Flexbox هي طريقة تخطيط CSS أحادية البعد كانت موجودة منذ فترة حتى الآن. يمكنك التفكير في Flexbox على أنه مجموعة من خصائص CSS ذات الصلة التي يمكنك استخدامها لمحاذاة عناصر HTML في حاوية وإدارة المسافة بينها.
قبل Flexbox ، كان هذا النوع من التخطيط يتطلب استخدامًا محبطًا وغير عملي لعوامة و خصائص الموقع.
إذا كنت قلقًا بشأن دعم المتصفح لـ Flexbox ، فلا تقلق. وفق caniuse.com، جميع المتصفحات الحديثة تدعم Flexbox.
أساسيات Flexbox
بينما يتضمن Flexbox العديد من خصائص CSS، الأساسيات بسيطة جدًا. يبدأ استخدام Flexbox دائمًا بإعلان الحاوية الرئيسية كحاوية مرنة عن طريق الإضافة العرض: فليكس لقواعد أسلوبها. يؤدي القيام بذلك تلقائيًا إلى جعل جميع العناصر التابعة لهذا العنصر مرنة.
بعد ذلك ، يمكنك التحكم في توزيع المساحة داخل الحاوية المرنة باستخدام ملف
تبرير المحتوى. يمكنك التحكم في محاذاة العناصر المرنة باستخدام ملف محاذاة العناصر ملكية.إليك مثال على رمز يستخدم Flexbox لنشر المساحة في الحاوية بالتساوي بين الأطفال ، ومحاذاتها جميعًا في وسط الحاوية. هذا هو HTML:
<فئة div ="حاوية">
<شعبة>1</div>
<شعبة>2</div>
<شعبة>3</div>
<شعبة>4</div>
<شعبة>5</div>
</div>هذا هو CSS:
.حاوية {
العرض: فليكس ؛
العرض: 100٪؛
تبرير المحتوى: الفضاء حول ؛
محاذاة العناصر: مركز ؛
الحدود: 1 بكسل أسود صلب ؛
الارتفاع: 200 بكسل ؛
}
.حاوية > شعبة {
الارتفاع: 100 بكسل ؛
العرض: 100 بكسل ؛
لون الخلفية: أحمر ؛
اللون الابيض؛
حجم الخط: 5rem ؛
محاذاة النص: مركز ؛
نصف قطر الحدود: 5 بكسل ؛
}
وإليك النتيجة:
ما هي شبكة CSS؟
CSS Grid هو نظام تخطيط مكمل لـ Flexbox. يعتبر Flexbox قويًا ، ولكنه ليس مناسبًا جدًا لأنواع معينة من التخطيطات. محاولة تخطيط هيكل صفحة كاملة باستخدام Flexbox سينتهي بها الأمر إلى كونها مهمة محبطة تتضمن ترميزًا قبيحًا وغير سيميائي و CSS مخترق.
شبكة CSS ليست بديلاً لـ Flexbox ، ولكنها نظام بديل لبعض المواقف.
إن دعم CSS Grid ليس واسع النطاق تمامًا كما هو الحال بالنسبة لـ Flexbox ، ولكن الشبكة كذلك مدعومة بشكل جيد في عام 2022.
أساسيات شبكة CSS
مفهوم الشبكة بسيط. كما يوحي الاسم ، تسمح لك CSS Grid بتقسيم المساحة الموجودة في الحاوية الرئيسية إلى شبكة من الصفوف والأعمدة ، بأي عدد من الصفوف / الأعمدة تريده. بعد ذلك ، يمكنك تحديد موضع العناصر الفرعية بالرجوع إلى خطوط شبكة الأصل.
ابدأ بإضافة العرض: الشبكة إلى الحاوية الأم. ثم استخدم ملف شبكة قالب الصفوف و شبكة-قالب-أعمدة خصائص لتحديد الصفوف والأعمدة التي تريد تقسيم الشبكة إليها. يمكنك بعد ذلك استخدام ملف عمود الشبكة و صف الشبكة خصائص العناصر الفرعية لإخبارهم بالمكان الذي يجب أن يكونوا فيه في الشبكة. لنلق نظرة على مثال الشبكة الذي يستخدم الإعداد المكون من خمسة عناصر من قبل ، ولكن بترتيب أكثر تعقيدًا.
ها هو HTML:
<فئة div ="حاوية">
<شعبة>1</div>
<فئة div ="اثنين">2</div>
<فئة div ="ثلاثة">3</div>
<فئة div ="أربعة">4</div>
<فئة div ="خمسة">5</div>
</div>هنا CSS:
.حاوية {
عرض: شبكة ؛
العرض: 100٪؛
صفوف قالب الشبكة: كرر (3 ، 1fr) ؛
أعمدة قالب الشبكة: كرر (3 ، 1fr) ؛
فجوة: 0.5rem;
الحدود: 1 بكسل أسود صلب ؛
الارتفاع: 300 بكسل ؛
}.حاوية > شعبة {
لون الخلفية: أحمر ؛
اللون الابيض؛
حجم الخط: 5rem ؛
محاذاة النص: مركز ؛
نصف قطر الحدود: 5 بكسل ؛
}
.حاوية &جي تي; .اثنين {
صف الشبكة: 2 ؛
عمود الشبكة: 2 ؛
}
ها هو الناتج:
تتضمن CSS Grid أيضًا قدرًا كبيرًا من ملفات الخصائص الأخرى التي يمكنك استخدامها لبناء تخطيطات أكثر تعقيدًا.
التي ينبغي لأحد أن تستخدمها؟
أولاً ، من المهم ملاحظة أنه لا شيء يمنعك من استخدام Flexbox و Grid معًا ، وفي بعض الحالات ، هذا هو الخيار الأمثل. بعد قولي هذا ، دعنا نجيب على السؤال حول التخطيطات الأكثر ملاءمة لكل نظام من هذه الأنظمة للتنفيذ.
يعد Flexbox هو الأنسب لبناء المخططات التي تتضمن محاذاة العناصر وتوزيعها على سطر واحد. أمثلة على هذا النوع من التخطيط هي محاذاة الرموز في نهاية القسم ، أو ترتيب الارتباطات في شريط التنقل.
من ناحية أخرى ، تضيء الشبكة بشكل أكثر سطوعًا عندما يتعين عليك تحديد موضع العناصر بدقة بالنسبة للآخرين (أفقيًا وعموديًا) ، وتحتاج إلى هذا الوضع للتكيف بسهولة مع أحجام الشاشات المختلفة.
للتوضيح ، إليك الكود الذي ستحتاج إلى كتابته لإعادة إنشاء التخطيط من مثال الشبكة باستخدام Flexbox.
HTML:
<فئة div ="حاوية">
<فئة div ="واحد فرعي">
<شعبة>1</div>
<شعبة>5</div>
</div><فئة div ="اثنين من الباطن">
<شعبة>2</div>
</div>
<فئة div ="الثلاثة الفرعية">
<شعبة>4</div>
<شعبة>3</div>
</div>
</div>
CSS:
.حاوية {
الحدود: 1 بكسل أسود صلب ؛
الارتفاع: 300 بكسل ؛
}.الفرعية {
العرض: فليكس ؛
العرض: 100٪؛
}.واحد, .ثلاثة {
تبرير المحتوى: مسافة بين
}.اثنين {
تبرير المحتوى: مركز ؛
}
.الفرعية > شعبة {
الارتفاع: 100 بكسل ؛
العرض: 100 بكسل ؛
لون الخلفية: أحمر ؛
اللون الابيض؛
حجم الخط: 5rem ؛
محاذاة النص: مركز ؛
نصف قطر الحدود: 5 بكسل ؛
}
وإليك النتيجة:
الشيء الرئيسي الذي يجب ملاحظته هنا هو أنه بينما ينتج هذا الرمز نفس الإخراج مثل مثال الشبكة ، فإن الترميز هنا أكثر تعقيدًا بشكل ملحوظ. يتطلب تنفيذ هذا التخطيط حاويات فرعية ، وعليك وضع div المرقمة خارج الترتيب في الترميز.
علاوة على ذلك ، افترض أنك بحاجة إلى تحويل هذا التخطيط إلى موضع حرج: قل محاذاة الجزء الخامس مع الثاني. إذا كنت قد استخدمت Flexbox لهذا الغرض ، فسيتعين عليك اللجوء إليه الموقف: نسبي أو شيئا من هذا القبيل. باستخدام الشبكة ، كل ما تحتاجه هو تحويل ملف عمود الشبكة ملكية.
ولكن ، على النقيض من ذلك ، فإن تنفيذ محاذاة سطر واحد بسيط من مثال Flexbox مع Grid سيؤدي إلى المزيد من CSS. من الواضح أن الشبكة أقل ملاءمة لهذا النوع من التخطيط.
بينما يمكن لـ Flexbox و Grid في الغالب تكرار تأثيرات بعضهما البعض ، إلا أن هناك بعض الاستثناءات. من الصعب جدًا إجراء تداخل بين العناصر باستخدام Flexbox فقط ولكنه سهل للغاية مع Grid. لا تسمح الشبكة أيضًا للعناصر بدفع نفسها بعيدًا عن العناصر الأخرى بهامش: تلقائي بالطريقة التي يعمل بها Flexbox.
يعد كل من Flexbox و Grid من أنظمة التخطيط القوية
يعد كل من Flexbox و CSS Grid نظامي تصميم يجعل من تخطيط محتوى صفحة الويب الخاصة بك أمرًا سهلاً. الشبكة هي الأفضل للتخطيطات ثنائية الأبعاد التي تحتوي على العديد من العناصر التي تحتاج إلى تحديد موضعها بدقة بالنسبة لبعضها البعض. يعد Flexbox أفضل للتخطيطات أحادية البعد أو أحادية الخط حيث تحتاج فقط إلى تباعد مجموعة من العناصر بطريقة معينة.